Question

I’m using the jQuery tablesorter plugin to sort a table, which assigns .click() handlers to the <th>s in the table. Since my table has alternating colors for each column, I’ve built a simple fix_table_colors(identifier) function that does as it should when I call it manually using Firebug. I would like, however, to have that automatically called after a sort.

To do this, I decided to retrieve the .click() handler from the <th>s, and assign a new handler that simply calls the previous handler, followed by fix_table_colors().

(This SO question is similar, but uses standard onClick() attributes, which won’t work here.)

From the accepted answer to this question, I have created the following code:

$(document).ready(function() {
    $("table.torrents").tablesorter({
        debug: true,
        headers: {
            1: { sorter: 'name' },
            2: { sorter: 'peers' },
            3: { sorter: 'filesize' },
            4: { sorter: 'filesize' },
            5: { sorter: 'filesize' },
            6: { sorter: 'ratio' }
        }
    });

    $('table.torrents thead th').each(function() {
        var th = $(this);
        var clickHandler = th.data('events').click[0];
        th.click(function() {
            clickHandler();
            fix_table_colors('table.torrents');
        });
    });
});

While this is conceptually correct, clickHandler doesn’t appear to actually be a function, and so I cannot call it.

With a bit more digging in Firebug, I found that click[3] appears to hold the function I’m looking for (and click[10] my new one). I get an ‘e is undefined’ error on line 2 of tablesorter.min.js when using that, though.

Am I even going down the right path? I have a feeling that with what I’ve found so far, I can make this work, but it’s going to be much uglier than I would expect it needs to be.

Answer 1

How about binding to the sortEnd (http://tablesorter.com/docs/example-triggers.html) event like so?

$(document).ready(function() {
    $("table.torrents").tablesorter({
        debug: true,
        headers: {
            1: { sorter: 'name' },
            2: { sorter: 'peers' },
            3: { sorter: 'filesize' },
            4: { sorter: 'filesize' },
            5: { sorter: 'filesize' },
            6: { sorter: 'ratio' }
        }
    });

    $("table.torrents").bind("sortEnd",function() {
        fix_table_colors('table.torrents');
    });
});