Simply turn your table into a sortable table by adding the "tablesorter" class to your table tag. The THEAD and TBODY tags also need to be present for the plugin to work - details and example below.
- Multi-column sorting : add “tablesorter” class to the required table
- Disable sorting from particular column : add “sortless” class to the required TH column within THEAD tag.
- Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
- Cross-browser support : IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
IMPORTANT
- THEAD and TBODY tags are compulsory in the desired table, otherwise this plugin will not work.
- Add "tablesorter" class in the desired TABLE tag.
- For column heading, use TH tag within THEAD tag.
- If you want to exclude a particular column, add "sortless" class to that TH tag.
/*===== Example of Table Code =====*/ <table class="tablesorter" style= "cellspacing="0" cellpadding="0"> <thead> <tr style="height: 24px; border: 1px solid #dad9c7;"> <th>Sortable Header 1</th> <th>Sortable Header 2</th> <th>Sortable Header 3</th> <th class="sortless">This is a Non-Sortable Header</th> </tr> </thead> <tbody> /*===== Table Body Content Here =====*/ </tbody> </table>
Related Articles