Orange is my favorite color
March 30, 2013

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

Many moons ago, I helped write the docs for TableSorter, a jQuery plugin for sorting HTML tables. It was last updated in 2008 but it’s as useful today as it was then. Thankfully, Rob Garrison has been making significant updates to it on GitHub. Importantly, he’s also brought in and radically improved one of my favorite widgets for Grouping. This lets you click a header and see collapsible groups. While the old widget was pretty limited, Rob has gone wild with this one giving you all kind of formatting capability over how the groups are formed and titled.

Two huge thumbs up: take a look at this jQuery table grouping demo.

If you’re using TableSorter 2.0.3 or 2.0.5 from 2008, take a look at Rob’s version today.

6 Comments

  1. karthick said:

    on April 22, 2013 at 3:25 am

    pager and grouping not working properly

  2. JohnJ said:

    on May 22, 2013 at 9:54 am

    Hello, I can’t find any contact’s info of the author of tablesorter jquery-plugin. It’s nice plugin, but when I started use it, find some problems for me (and I give you solution):
    1. Using [0, 0], [1, 0], etc in call $().tablesorter looked not so nice for me.
    2. Using metadata as “{…}” in class atribute not so nice too, because I use Smarty templator for templates.
    3. In default parsers “html” is absent. I can’t understand why sorting with mistakes when using started :)

    My resolve based on using validating user-atributes data-*. jQuery support it atributes with function $(…).data()
    So, now we can use for disabling sorting for this column and and some to set parser for this column (disable autodetect for parser type).

    Code changed (jquery.tablesorter.js Version 2.0.3 ):

    in function buildHeaders:
    replace if(checkHeaderMetadata(this) || checkHeaderOptions(table,index)) this.sortDisabled = true;
    by
    if (checkHeaderMetadata(this) || checkHeaderOptions(table,index) || checkHeaderUserdata(this)) this.sortDisabled = true;

    so add function checkHeaderUserdata before checkHeaderMetadata:
    function checkHeaderUserdata(cell) {
    return $(cell).data('tablesorter') === 'none';
    }

    in function buildParserCache:
    before } else if((table.config.headers[i] && table.config.headers[i].sorter)) { insert next rows:
    } else if ($($headers[i]).data('tablesorter') && $($headers[i]).data('tablesorter') !== 'none') {
    p = getParserById($($headers[i]).data('tablesorter'));

    And finally, html-parser:
    ts.addParser({
    id: 'html',
    is: function (s) {
    return //.test(s);
    },
    format: function (s) {
    return s.toLowerCase().replace(//g, '');
    },
    type: 'text'
    });

  3. JohnJ said:

    on May 22, 2013 at 9:58 am

    ops, tags cutted…
    * So, now we can use <th data-tablesorter=”none”&rt; for disabling sorting for this column and <th data-tablesorter=”currency”&rt; (or some other) to set parser for this column (disable autodetect for parser type).

  4. JohnJ said:

    on May 22, 2013 at 10:03 am

    html-parser function also was cutted…

    ts.addParser({
    id: 'html',
    is: function (s) {
    return /<.*&rt;/.test(s);
    },
    format: function (s) {
    return s.toLowerCase().replace(/<.*?&rt;/g, '');
    },
    type: 'text'
    });

  5. JohnJ said:

    on May 22, 2013 at 10:04 am

    replace &rt; on > please :(

  6. Brian said:

    on May 22, 2013 at 2:47 pm

    @John, sorry about the formatting. The best place to put your requests is with the author of the plugin. He has a githup repo and issues tracker here:

    https://github.com/Mottie/tablesorter/issues

{ RSS feed for comments on this post}