JS tablesorter

I was adding reports to an application and wanted a quick way of sorting the data based on multiple columns, without having to write lots of backend code to do so. Using a JavaScript solution also meant that the re-ordering would be more responsive, provided the dataset wasn’t too big. I found tablesorter, which is a nice jQuery plugin written to do exactly what I wanted. Although it doesn’t seem to be under development any more (the last release was sometime in 2008), it seems to be stable and quite powerful.

To get going, all you need to do is surround your table headers with a thead element, and the data you want to sort with tbody, and you’re good to go.
The sorting that comes out of the box is immediately useful, with many data types automatically picked up (e.g. dates, decimals, percentages, IP addresses) and sorted correctly, ascending and descending, with a clean user interface to match. You can also sort on multiple columns, and specify defaults when the page is loaded.

When you want to get more customised, that’s easy too. CSS classes for the interface can be easily changed. If you want to add a custom sorter (e.g. it doesn’t parse prettified numeric values automatically, such as -3,405.02, so I wrote a custom parser for these), they are simple to write:

$.tablesorter.addParser({
    id: 'value', // unique name for the parser
    is: function(s) {
        /* a function to determine based on cell values whether a parser can be used
         * e.g. return !isNaN(parseFloat(s));
         * return false to only use the parser when explicitly specified */
        return false;
    },
    format: function(s) {
        // function to parse a value from the data
        return parseFloat(s.replace(/[^\d.-]/, ""));
    },
    type: 'numeric' // set type, either numeric or text
});

To use your custom parser, you can specify which columns to use it for when initialising tablesorter:

$(function() { 
    $("table").tablesorter({ 
        headers: { 
            3: { sorter: 'value' } 
        } 
    }); 
});

This would use the “value” parser for sorting values in the fourth column (columns are of course zero-indexed). However, this is a bit clumsy, especially if your columns might shift position (as was my case). Far better I found was to use the jQuery metadata plugin, which allows you to configure tablesorter using inline code, e.g.

<table cellspacing="1" class="tablesorter">             
    <thead>
        <tr> 
            <th class="{sorter: false}">first name</th> 
            <th>last name</th> 
            <th>age</th> 
            <th class="{sorter: 'value'}">total</th> 
        </tr>
    </thead> 
    ...

So no matter how your markup changes, your sorting won’t break. 🙂 There’s also functionality for paging and other AJAX enhancements, and custom widgets, but I didn’t look at those. All in all it seems an excellent tool, and certainly worked very well in my application.

One thing to note is that the dates are automatically parsed as being in US format; you can change this in the defaults when initialising tablesorter (or just edit the base code as I did): the option is called dateFormat and should be set to “uk” for UK-formatted dates:

$(function() { 
    $.tablesorter.defaults.dateFormat = "uk";
    $("table").tablesorter();
});