Make HTML Table Columns Sortable with jQuery Tablesorter Plugin

In this post you will learn how to use the freely available Tablesorter jQuery plugin, which allows you to sort HTML table columns alphanumerically by clicking the column header.

If you want your users to be able to sort tables and save the order, check out this post instead.

Setup Tablesorter

Make sure you have setup jQuery on your server, as Tablesorter depends on it.

Download the Tablesorter plugin from tablesorter.com

Extract the jquery.tablesorter.min.js file from the archive and upload it to your webserver’s javascript directory.

Include the plugin on the pages where you want to have sortable tables.

<!-- jQuery Table Sorter Plugin -->
<script src="/javascript/jquery.tablesorter.min.js"></script>

Now you can add the following line to your jquery code.

$(document).ready(function(){
    //existing code
    $("table").tablesorter()
}

Refresh the page and all tables should be sortable by clicking on the column header.

If you wish to make only certain tables sortable, replace the generic table element with the table’s unique ID tag. For example, replace $(“table”).tablesorter() with $(“#tableid”).tablesorter()

Add Sort Symbols to Table Header

To let users know that the columns can be sorted, you can append the standard sorting symbols (▴▾) to the header.

Start by adding a new th.sortable class to your CSS file.

table th.sortable:after {
    content: " \25B4\25BE"; /* Add unicode sort symbols to table headers in the sortable class */
}

Now add the sortable class to the table header elements that you want to be sortable.

<th class='sortable'>Name</th>	
<th class='sortable'>Salary</th>
<th>Company</th>

Only the table headers that belong to the sortable class will have the sortable symbols.

References

http://tablesorter.com/docs/

http://www.kryogenix.org/code/browser/sorttable/