Step 243. Library jQuery. The use of expansion modules. Extension library jQuery UI. Table. The Tablesorter plugin

In this step, we will consider a simple example of using this plugin.

The material of this step is based on There you can find a large number of examples of usage of this plugin.

Extension Tablesorter can complement any table with elements


sort option, which does not require a full page refresh. Among the features of the expansion include: the ability to sort by multiple columns, sort the data in various formats (such as date, time, currency, addresses, URLS), secondary “hidden” sorting and expandable through a system of widgets.

Addresses where it is possible to take component: or

    Tablesorter is a plugin created based on the JavaScript libraries jQuery and intended to turn a plain HTMLtable containing the tags THEAD and TBODY, in a sortable table without page refreshes. Tablesorter can successfully understand and sort many types of data, including related data contained in the cell. It has many useful features, including:

  • sorting on multiple columns;
  • analysis for the purpose of sorting text, URIs, integers, floating point numbers, IPaddresses, currencies, dates (according to the standards of ISO, including long and short formats), time;
  • support attributes ROWSPAN and COLSPAN in TH elements of the table;
  • support the “secret” dependent sorting (for example, support to sort alphabetically as the primary sorting on other criteria);
  • extensibility through a system of widgets;
  • cross-browser compatibility: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+;
  • small code size.

Here is an example usage of this plugin:

Fig.1. The result of the plugin (click the column header)

The full text of this example can be found here.

In order to use the plugin tablesorter, you need to load the jQuery library and the plugin tablesorter tag HTML document.


    Tablesorter works in standard HTML tables with the use of binding tags, THEAD and TBODY:

Surname Name Email Payment The website
Ivanov Peter $50.00
Petrov Ivan $50.00
Sergeev Michael $100.00
Mikhailov Potap $50.00

After the page is loaded give the command tablesorter to sort a page:

 $(document).ready(function() { $("#myTable").tablesorter(); } ); 

Clicking the mouse on the column headers of a table, you can see that the table now to sort! You can also use the options when you initialize the table. In this case, we give the command to sort the first and second column in ascending order:

 $(document).ready(function() { $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); } ); 

Note. Tablesorter will automatically detect most data types including numbers, dates, IPaddresses.

In the next step we will complete the study of this question.

The previous step the Content of the Next step