Orange is my favorite color

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:

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:
  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 if these don’t work.

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


  1. Rey Bango said:

    on June 27, 2007 at 6:05 pm

    My name is Rey Bango and I’m part of the jQuery project team. I’m also very savvy in CF having used it since 3.5x and being a former member of Team Allaire. I’ll check out your post in a little while as I’m currently tied up and try to help you.

    PS: I love pollo asado, carne asada y carnitas!

  2. Josh Nathanson said:

    on June 28, 2007 at 1:06 pm

    I also found the docs extremely lacking, and so when I wanted to sort a column that had additional html structure (a table) within each cell, I had to dig through the source code to figure out how to do it.

    There is a parameter called textExtractionCustom that you need to leverage. It takes a function as its value. tableSorter will pass to this function a jquery object containing the currently processing table cell. So, you apply your function to the passed in cell to extract the text that will be sorted. Below is an example of how I used it.

    // ‘textextr’ is my function to extract the data
    textExtractionCustom : textextr

    // the function to extract the sortable text
    // the contents of the function will differ
    // based on your extraction needs
    textextr = function(o) {
    return $(“.edit:eq(0)”,o).text();

    Hope this helps somebody!

    – Josh

  3. Josh Nathanson said:

    on June 28, 2007 at 1:10 pm

    Just an add-on, looking at my comment, it’s not clear when I state that the documentation is lacking, that I’m referring only to the tableSorter plugin, and not jQuery as a whole. The documentation for jQuery is for the most part excellent.

    Also, I’m a fellow ColdFusion user. Viva la CF/jQ!

    – Josh

  4. Rey Bango said:

    on June 28, 2007 at 5:38 pm

    Sounds like you’re all set Josh. You may also want to take a peak at which is another table filtering/sorting plugin.

  5. Orange is my favorite color » Blog Archive » TableSorter 2.0 said:

    on August 15, 2007 at 3:39 pm

    [...] TableSorter 2.0. After my previous post on TableSorter and my comments about the documentation, plugin author Christian Bach contacted me [...]

  6. Thomas said:

    on October 24, 2007 at 1:27 am

    With tablefilter
    I’m not able to sort columns with european dates (dd/mm/yyyy)

    I need help!!!


  7. brian said:

    on October 24, 2007 at 8:59 am

    @Thomas – I can’t help with tablefilter but I can tell you that TableSorter, the one by Christian Bach, is fully capable of sorting on European dates. Try it instead!

{ RSS feed for comments on this post}