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):
And the data should be placed inside# FC P W D L GD Pts Pts (%)
tsGroup
class (customizable via settings):
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.Moscow teams ... 1 Spartak 30 22 3 5 19 69 76.7
$("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'.
# | FC | P | W | D | L | GD | Pts | Pts (%) |
---|---|---|---|---|---|---|---|---|
1 | Spartak | 30 | 22 | 3 | 5 | 19 | 69 | 76.7 |
2 | CSKA | 30 | 18 | 8 | 4 | 32 | 62 | 68.9 |
3 | Zenit | 30 | 18 | 7 | 5 | 31 | 61 | 67.8 |
4 | Krasnodar | 30 | 12 | 13 | 5 | 18 | 49 | 54.4 |
5 | Terek | 30 | 14 | 6 | 10 | 3 | 48 | 53.3 |
6 | Rostov | 30 | 13 | 9 | 8 | 18 | 48 | 53.3 |
7 | Ufa | 30 | 12 | 7 | 11 | -3 | 43 | 47.8 |
8 | Lokomotiv | 30 | 10 | 12 | 8 | 12 | 42 | 46.7 |
9 | Rubin | 30 | 10 | 8 | 12 | -4 | 38 | 42.2 |
10 | Amkar | 30 | 8 | 11 | 11 | -4 | 35 | 38.9 |
11 | Ural | 30 | 8 | 6 | 16 | -20 | 30 | 33.3 |
12 | Anzhi | 30 | 7 | 9 | 14 | -14 | 30 | 33.3 |
13 | Orenburg | 30 | 7 | 9 | 14 | -11 | 30 | 33.3 |
14 | Arsenal | 30 | 7 | 7 | 16 | -22 | 28 | 31.1 |
15 | Krylia Sovetov | 30 | 6 | 10 | 14 | -8 | 28 | 31.1 |
16 | Tom | 30 | 3 | 5 | 22 | -47 | 14 | 15.6 |
$("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).
# | FC | P | W | D | L | GD | Pts | Pts (%) |
---|---|---|---|---|---|---|---|---|
Moscow teams | ||||||||
1 | Spartak | 30 | 22 | 3 | 5 | 19 | 69 | 76.7 |
2 | CSKA | 30 | 18 | 8 | 4 | 32 | 62 | 68.9 |
8 | Lokomotiv | 30 | 10 | 12 | 8 | 12 | 42 | 46.7 |
Other teams | ||||||||
3 | Zenit | 30 | 18 | 7 | 5 | 31 | 61 | 67.8 |
4 | Krasnodar | 30 | 12 | 13 | 5 | 18 | 49 | 54.4 |
5 | Terek | 30 | 14 | 6 | 10 | 3 | 48 | 53.3 |
6 | Rostov | 30 | 13 | 9 | 8 | 18 | 48 | 53.3 |
7 | Ufa | 30 | 12 | 7 | 11 | -3 | 43 | 47.8 |
9 | Rubin | 30 | 10 | 8 | 12 | -4 | 38 | 42.2 |
10 | Amkar | 30 | 8 | 11 | 11 | -4 | 35 | 38.9 |
11 | Ural | 30 | 8 | 6 | 16 | -20 | 30 | 33.3 |
12 | Anzhi | 30 | 7 | 9 | 14 | -14 | 30 | 33.3 |
13 | Orenburg | 30 | 7 | 9 | 14 | -11 | 30 | 33.3 |
14 | Arsenal | 30 | 7 | 7 | 16 | -22 | 28 | 31.1 |
15 | Krylia Sovetov | 30 | 6 | 10 | 14 | -8 | 28 | 31.1 |
16 | Tom | 30 | 3 | 5 | 22 | -47 | 14 | 15.6 |