TableSorter Add-ons (plus jQuery)

Thanks to Dan, I took a look at jQuery today. Although Alex Russell convinced me at a 106 Miles meeting some 18 months ago to use Dojo, I’ve grown tired of waiting for the API to stabilize and have been looking for something else that I could use to Get Things Done. What killed me was all of the time I spent with Dojo 0.3.1 to get this fancy editor to work and when I tried upgrading to 0.4.x it all broke. I realize we’re talking about WAY pre-1.0 software and as such it’s entitled to not be backwards compatible but I’m also entitled to say fuhgeddaboutit (for the time being).

So anyways, jQuery. It has a pretty sweet TableSorter that only takes a line or two of code to turn on. I wanted to be able to sort on dates formatted like “mmm d” because my dataset is over a short time frame and does not cross year boundaries. The extra noise of the year is unnecessary and just takes up space. It wound up taking another 4 or 5 hours to make this happen because the documentation and demos don’t cover custom sorting.

Here is what it takes to get a table (id of “tblAttendee”) sorted once you’ve included the jQuery and tablesorter js files:

$(document).ready(function()
{
$("#tblAttendees").tableSorter({
sortDir: 1,
sortClassAsc: 'ascsort',
sortClassDesc: 'descsort',
highlightClass: 'highlight',
headerClass: 'unsorted',
columnParser: [[3, 'usMonthOnlyDate'] ]
});
}
);

These parameters are all optional. I’m using a couple of classes for the table headers to to show a background image with an up and down arrow appropriately. Here is what the documentation doesn’t tell you and wasn’t immediately obvious from looking at the code when you want to use a custom sorting function:

1. First, the columnParser parameter should be structured as an array of 2-item arrays. The first element of the sub-array refers to the column index you want to assign a custom parser. The second element of the sub-array is a string that matches the name of the parser you want to use. By default, this list includes: generic, currency, integer, isoDate, shortDate, usLongDate, ipAddress, url, time and floating. This took a long time to figure out.
2. In my case, I added the following code (around line 505):
   $.tableSorter.parsers.usShortDate = {
id: 'usShortDate',
is: function(s) {
return s.match(new RegExp(/^[A-Za-z]{3,10}\.? [0-9]{1,2}, ([0-9]{4}|'?[0-9]{2})$/));
},
format: function(s) {
return $.tableSorter.utils.formatFloat((new Date(s)).getTime());
},
sorter: $.tableSorter.sorters.numeric
};
$.tableSorter.parsers.usMonthOnlyDate = {
id: 'usMonthOnlyDate',
is: function(s) {
return s.match(new RegExp(/^[A-Za-z]{3,10}\.? [0-9]{1,2}$/));
},
format: function(s) {
s += ', ' + new Date().getYear();
return $.tableSorter.utils.formatFloat((new Date(s)).getTime());
},
sorter: $.tableSorter.sorters.numeric
};
   Note the first one is basically a cut and paste with a different regExp of the existing parsers but the second one does some string manipulation to get a real Javascript date for comparison.
3. Around line 560, I inserted the following two lines to tell TableSorter that these two new parsers were available:
   $.tableSorter.analyzer.add($.tableSorter.parsers.usShortDate);
$.tableSorter.analyzer.add($.tableSorter.parsers.usMonthOnlyDate);
4. Now format your data in the table the way you like, pass in the columnParser parameter and you should be good to go. Remember table columns are 0-based arrays when you’re doing your targeting.

I’m going to try a few more things with jQuery to see how I like it. I’m also evaluating mootools for a few graphical effects and I’ll head on to prototype and script.aculo.us if these don’t work.

Any input from jQuery (especially with ColdFusion) users on day-to-day usage would be appreciated.