Table Sorter

Owned by Musa Jatkowski
Last updated: Mar 08, 2022 by Sarah Nguyen (Deactivated)
1 min read

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.

  • Multi-column sorting: add “tablesorter” class to the required table.

  • Disable sorting from a 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

  1. THEAD and TBODY tags are compulsory in the desired table; otherwise, this plugin will not work.

  2. Add "tablesorter" class in the desired TABLE tag.

  3. For column heading, use TH tag within THEAD tag.

  4. 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