Table sorting is a very common polishing feature that you’ll see for most tabular data. In ASP.NET you get functionality with this out of the box with a control like a GridView, but requires a full postback just to sort data that is already presented on the screen (unless your in an update panel – but even still, seems like a lot of work when you have all the data). That is when client side table sorting enters the picture. This makes for an especially nice user experience and reduces development time in worrying about having to sort data server side. This also reduces load on your server by minimizing the number of postbacks required.
The JQuery Tablesorter can be found at: http://tablesorter.com/docs/
The documentation suggests its compatibility with v1.2 of JQuery. I have personally confirmed it works in JQuery 1.3.2 and 1.4.2 (the newest version). So no worries with those versions.
The first thing in working with the Tablesorter is to use proper compliant html in your tables. This means making use of the thead, tbody, and tfoot nodes when creating your data. The Tablesorter will recognize these table types automatically. Here is an example of proper markup:
<thead> – This will be recognized as being a clickable cell that will sort the rows beneath it.
<tbody> – This will be recognized as rows that are ready to be sorted.
<tfoot> – This will be recognized as rows that should not be sorted – i.e. footer row for grand total, etc.
After that, you need to import two scripts: JQuery core, and the Tablesorter script. Then, you need to initialize the Tablesorter for the table you created in HTML. This is super easy:
And that is it. You have implemented the base functionality of table sorting. This will automatically recognize and determine data types as Numeric or Text. When a user clicks on a header it will automatically change its styles based on asc, desc, or not sorted. You can of course add some styles to these to give visual aid to the user on what he has clicked to sort. These styles should be self explanatory:
Now you should have a table sorting correctly that looks like the following:
However, if you have some type of numeric data hidden within nodes or perhaps, “80 km” or a measurement like “80 cm”, this data type will be auto detected as text. In order for it to sort correctly you have to write a custom parser and tell the Tablesorter to use it. Check out this example:
There are a couple of things going on in the above example. First, we add a new parser to the Tablesorter repertoire. Then we initialize the Tablesorter headers by column number (starting at 0). You simply specify the Tablesorter parser to use. Optionally, you can specify “false” and this will prevent sorting on that column. The final “sortList” property specify’s the default sorting column and secondly the order (0=asc, 1= desc).
Hmmmm, not bad, however we can clean this up a bit and get Tablesorter to do some of the work for us by using a text extraction option as well. In text extraction you specify how the text comes out of the cell and returned. Take a look:
This is nice since then you don’t have to specify each columns data table. You could potentially have a text extraction method that looked for and removed things like “KM”, “CM”, “%”, anything you wanted. Then when a new column is added to your table it is automatically sorted without the requirement of you to change the code. I like using textExtraction where possible, but for where you need further granularity or specialized business logic you can use the custom parsers above.
Integration with ASP.NET
This Tablesorter is simple to work with, and easy to integrate into .NET with a gridview for example. In the example of using a GridView, the only concern is making sure your column headers end up in a <thead> section. The GridView does not do that out of the box. You can do this though by adjusting the GridView rendering something like this:
ReportGrid.HeaderRow.TableSection = TableRowSection.TableHeader;
Where, in the above line, the ReportGrid is your GridView.
Download JQuery: www.jquery.com
Download Tablesorter: www.tablesorter.com