Sorting tabular data with tableSorter

The jQuery tableSorter script is one of those indispensable scripts for a web developer, as most applications have a need to display tabular data to the user at some place in their application. The problem is displaying this data in some sort of user friendly format.

The main problem is tables filled with data are commonly very long. Forcing the user to scroll around the page in search of the rows they are looking for is not an optimium situation.

The jQuery plugin tableSorter makes this process a lot easier, it is easy to include in your pages, its extendable, works on all the major browsers and allows client side sorting of the data by the end user on the columns of their choice.


Plug in Usage

Integrating the tableSorter functionality into your application couldn’t be easier, simply include the tableSorter script along with a copy of jQuery library into your page.

 <script type="text/javascript" src="/js/jquery.js"></script> 
 <script type="text/javascript" src="/js/jquery.tablesorter.js"></script>
 

Then simply tell tablesorter what table it is you want to sort

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

 

You can see a demo of tableSorter in action here.

Going Further

By using the tableSorter pager script it is also possible to include pagination into your larger datasets by using the pager extension to keep it manageable for the end user.

Browser Compatibility

This script works on all major browsers and is even compatible with Internet Explorer 6!

Further Reading:

The tablesorter homepage
tableSorter download