jQuery’s Tablesorter is easily customizable to sort by absolute value or anything else you’d like. In my case, I have a column of “standard deviations above or below the mean” that I want to display sorted by absolute value. This was pretty easy with a little Javascript code.

Absolute value Tablesort parser code:

$(document).ready(function() {
  $.tablesorter.addParser({
    id: 'abs',
    is: function(s) { return false; },
    format: function(s) { return Math.abs(s); },
    type: 'numeric'
  });"

    $("#tablename").tablesorter(
      {
       headers:
       {
         5 : { sorter: "abs"  }
       }
     });
/* ... */
});

How the custom Tablesort parser works

jQuery’s “document loaded” event handler, called ready, is grabbed in line 1. We pass it an anonymous function, which will be called when all of the document assets (images, embedded .js files, etc.) are done being downloaded.

The $.tablesorter call returns the global Tablesorter object. We can add custom parsers to it fairly easy, based on the example given in the Tablesorter documentation and the default parsers included in the Tablesorter source code itself.

Our parser is defined based on the hash given to addParser(). It will be called “abs” (line 3). The anonymous function labelled “is” (line 4) is called by Tablesorter as part of its auto-detection routine to determine whether this parser should be used for a given column of data. In our case, we don’t ever want the abs parser to be used automatically, only when specifically called for, so this function simply always returns false.

Line 5, “format“, is the heart of the parser. This translates the data into the format it will be sorted by: here, we can simply pass whatever is in the cell to the builtin Math.abs function to get its absolute value, and return that. (The name is somewhat misleading. “Format” implies that its return value will be used solely for visualization, when it will actually be performing data manipulation based on the result.)

Lastly, line 6 simply indicates that this is a numeric field.

Applying the custom parser to a column

Tablesorter’s “setting parser by metadata” stuff did not (easily) work with my customized parser, maybe because of load-order issues: it probably needs the custom parser to already be defined when the DOM is parsed or when the Tablesorter code is loaded, or something like that. No matter where I put the definition of my parser within the HTML page, it didn’t work. I tried it at the beginning, at the end, and in a $(document).ready( callback function before the call to tablesorter() itself. (Perhaps it would work if loaded in the header; I didn’t try that.)

Rather than wrestle with Tablesorter’s class-based parser specification further, I decided to simply add the custom parser manually to the ready function, in lines 9-15. This indicates that column 5 is to be sorted with the “abs” parser.

Specifying the column number numerically has obvious drawbacks in that if I ever add or subtract a column numbered 5 or less, or change their order, I have to go in here and change that number. Since my project is in its prototype phase, this is an acceptable tradeoff at this stage for the time saved by not figuring out why the class based selector doesn’t work. If this project gets promoted, I will have to revisit the issue.

Popularity: 13% [?]

Print PDF