Delphinidin

jQuery has an extensive community of developers who create jQuery plug-ins. The only downside to having so many options to choose from is that sometimes the quality of code and support for a plug-in is lacking. You can usually tell a good plug-in from a bad one by the documentation that accompanies it. You can build your own jQuery code to do table sorting and filtering, but quite a few powerful plug-ins can also do this. Using a plug-in can rapidly speed the implementation of a solution, and because most plug-ins are open source, it gives you a good base to get started upon. I review how to work with two plug-ins in particular: tablesorter and Visualize.

- Sorting Rows Using The Tablesorter Plug-In
The tablesorter plug-in allows you to apply sorting to any table. The tablesorter plug-in has been around for a few years and is well supported with excellent documentation. It works on all the popular browsers. This tutorial references version 2.0.5 of the tablesorter plug-in. For example, if you have a table that contains more than one hundred records and you would like to sort all of them by clicking on one header item, you can easily set this up using the tablesorter plug-in. The benefit to sorting the tabular data using jQuery instead of a server-side method is that jQuery is faster in reorganizing the records. If you use a server-side solution, the Web site has to reload each request whenever a reorder is submitted, which slows down the results.

1. Before you can apply the tablesorter plug-in to your table, you need to make sure the table is set up correctly. If it’s not, the plug-in won’t work. You need to wrap all of the table header cells with a thead tag and all of the table cells with a tbody tag.

2. When using a plug-in with jQuery, you always need to include it at the top of your page. You should load plug-ins before any code that references them. Any code that doesn’t reference the plug-in can happily be loaded before the plug-in, but always after the jQuery library.

<script src="js/tablesorter.min.js"></script>

3. Set up a document ready function and, within it, add a statement that selects the #data table and applies the tablesorter() method to it. If you apply the tablesorter method without any options, the default options is used.

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

- Changing Default Sort Order
You can change the default sort order by using the sortList parameter to pass in an array:

[columnIndex, sortOrder]

Using the tablesorter statement you have set up from the previous example, pass in the sortList parameter. The first number in the array is the column index and the second number is the sortOrder (0 equals ascending and 1 equals descending).

$("#data").tablesorter({sortList:[[1,0]]});

The tablesorter plug-in is a quick and easy way to add sorting to any table. If you use this plug-in, you will spend less time writing JavaScript and can effectively spend more time designing a table that is easy to use and visually appealing. By passing different CSS classes into the tablesorter function, you can customize the look and feel. This option is necessary if you have multiple tables on a page and would like to style them all slightly differently.