Orange is my favorite color
November 11, 2008

Web/Internet - jQuery | Trackback | del.icio.us | digg

Doing a little Javascript hacking today and have a few parsers to share for the TableSorter jQuery plugin. I’ve written some in the past but more is always merrier.

Sorting alphanumeric data in numeric order

I have member numbers which can look like ‘A23423423′ or ‘2000-342′ or ‘220342BMW’ but I want to sort them in numeric order since the characters often refer to associate members or some sub-qualifier. It takes a pretty simple parser with a regular expression to accomplish it:

$.tablesorter.addParser({
id: 'memNumber',
is: function(s) {
return false;
},
format: function(s) {
return s.replace(/[^0-9]/g, "");
},
sorter: 'numeric'
});

Adspeed Parsers & Widgets

I also came across a recent post over at Adspeed.org that includes several parsers and widgets:

  1. Parser for sorting values like “$1,300.50″
  2. Parser for sorting values like “2 months ago”,”3 years ago” (actual timestamp hide in the comment)
  3. Parser for sorting values like “SMALLER”,”SMALL” (actual text value hide in comment)
  4. Widget to highlight a row when mouse hovers it
  5. Widget to highlight a header when mouse hovers it
  6. Widget to save/memorize sort order via AJAX

I particularly like the idea of embedding the sortable value in a comment and using that to sort. It gives you total freedom in how you display versus sort (and could work just as well as my custom member number parser above).

You can write your own parsers and widgets easily to extend TableSorter for your own requirements.

1 Comment

  1. Dan G. Switzer, II said:

    on November 11, 2008 at 2:23 pm

    @Brian:

    If you use the metadata plug-in (for embedding sort information in the class attribute,) then the tablesorter has a built-in parser for using that value.

    This gives you the same flexibility as using the comments, but doesn’t require additional plug-ins. I use this to sort dates:

    Date

    #getRecords.date#

    I’m using javaCast() to cast the date into a numeric value. This allows me to display the date however I want, but the sorter will still sort the date correctly.

{ RSS feed for comments on this post}