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:
line 1
line 2
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”>
      <th scope=”col”>a</th>
      <th scope=”col”>b</th>
      <td>line 1</td>
      <td>line 2</td>
    • 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
      // sort on the third column, order ascending
      sortList: [[0,0],[1,0]]
  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
line 12
line 21