Home

Tablesorter quick guide

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 controls row should have tsTitles class. The data should be placed inside tsGroup class. You may want to check the examples on index.html to get the right html markup. The working examples can be found on CodePen.

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 options. The options are:

• tablesorterColumns - an array of objects describing the indexes and sorting order for the columns that are to be sorted. Indexes start from 0. Sorting order means the order in which the rows will appear after clicking on the controls.

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