Introduction

TableSorter is a jQuery plugin to sort tabular data in the web UI. It consists of 3 cornerstones - markup requirements, styles and javascript. While styles and javascript parts are provided out of the box, making the right markup is of plugin users' concern. In order for TableSorter to work properly, your table should have the right (very simple though) markup. Make use of tbody and thead elements. The table itself must have tablesorter class. The controls row should have tsTitles class (customizable via settings):

<thead><tr class="tsTitles">
<th>#</th><th>FC</th><th>P</th><th>W</th><th>D</th><th>L</th><th>GD</th><th>Pts</th><th>Pts (%)</th>
</tr></thead>

And the data should be placed inside tsGroup class (customizable via settings):

<tbody><tr><th colspan="9">Moscow teams</th></tr></tbody>
<tbody class="tsGroup">
  <tr><td>1</td><td>Spartak</td><td>30</td><td>22</td><td>3</td><td>5</td><td>19</td><td>69</td><td>76.7</td></tr>
...
</tbody>

You may want to check the examples below to get the right html markup. How to import the plugin's components is covered in README.md file inside the package/repo.

Basic usage

$("table.example1").tablesorter({tablesorterColumns: [{col: 0, order: 'desc'}, {col: 7, order: 'asc'}]});

Just select a table and pass in an object with tablesorter settings. The settings are:

• tablesorterColumns - an array of objects describing the indexes and sorting order for the columns that are to be sorted. Indexes start from 0, e.g. column "FC" in the table below has index 1, column "W" has index 3 etc. Sorting order means the order in which the rows will appear after clicking on the controls.
• tablesorterTitlesClass - class name for control row, defaults to 'tsTitles'.
• tablesorterGroupsClass - class name for rows container (usually tbody-tag), defaults to 'tsGroup'.

Sorting within groups of rows

$("table.example2").tablesorter({tablesorterColumns: [{col: 0, order: 'desc'}, {col: 3, order: 'asc'}]});

It is also possible to group rows and sort within the groups. It is worth mentioning that in the markup the controls always should be children of .tsTitles and rows to sort should always be children of .tsGroup (or the class you passed in to the Tablesorter plugin).