Jquery - Implement extension to table sort

Question

Ok..so some kind fellow helped me with how to identify the first 4 rows and then apply css to them alone..

$("table").each(function() {
  $("tr:gt(4)", this).addClass("hidden");
});

$("table").tablesorter();

(http://www.tablesorter.com)

now i need to modify the tablesorter that comes with an extension so that when ever the sort is performed that the class assignment is recalculated. so basically all the tr will have their classes removed and then recalculated based on the new sort.

I hope this makes sense

Answer 1

Well, you'll have to find the part which does the sorting in your tablesorter, probably some onClick event or something like that, and add whatever code you need, in this case removing the class from every row first, and then adding it again to the elements you want. Can't say anything more specific with more details from your side, which tablesorter, code?

Answer 2

Do you need to modify the tablesorter plugin, or could you just create your own plugin that removes the hidden class from all <tr>, then calls the tablesorter, then executes $("tr:gt(4)", this).addClass("hidden");?

Alternatively, take a look at http://tablesorter.com/docs/example-triggers.html. It looks like you can bind to sortStart and sortEnd events, like so:

$("table").tablesorter(); 
$("table").bind("sortStart",function() { 
    // remove hidden class here 
}).bind("sortEnd",function() { 
    // add hidden class to certain rows here 
});