Sortable Tables Using jQuery

  1. Build your table using the table tool in ckedit (the editor built in) – it’s the button that looks like a table and says ‘Insert/Edit Table’ when you mouse over it.
  2. Here is how I built an example table:http://odev.casa.colostate.edu/Data/Sites/1/images/edit-table-pic.png
a
b
line 1
2
line 2
1
It is important to use a header row!
  1. Next, enter source mode – you need to make a couple changes in the code…
    • Add class=”tablesorter” to the table.<table cellspacing=”1″ cellpadding=”1″ border=”1″ class=”tablesorter”>
      <thead>
      <tr>
      <th scope=”col”>a</th>
      <th scope=”col”>b</th>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td>line 1</td>
      <td>2</td>
      </tr>
      <tr>
      <td>line 2</td>
      <td>
      <p>1</p>
      </td>
      </tr>
      </tbody>
      </table>
    • Copy and paste the following code into the source (here’s jquery.tablesorter.min.js):<script type=”text/javascript” src=”/Data/Sites/1/skins/OTPv1/jquery.tablesorter.min.js”></script> <script type=”text/javascript”>
      $(document).ready(function() {
      // call the tablesorter plugin
      $(“.tablesorter”).tablesorter({
      // sort on the third column, order ascending
      sortList: [[0,0],[1,0]]
      });
      });
      </script>
  2. That’s it!  Here is an example of a working sortable table (added this stylesheet and these images to the skin folder to make things pretty)bg.png
    bg.png
    Desc.png
ab
line 12
line 21