Got myself in a funny situation: page has three tables. Using sortEnd, any time you sort one table, it sorts the other three. However, since I bound sortEnd to the function that does the sorting, you get a infinite loop of sorting/resorting. It looks like:
$("table.tablesorter").tablesorter({widgets: ['zebra']}).bind("sortEnd", function() {
$(this).find("th.headerSortDown,.headerSortUp").each(function(i) {
index = $(this).attr("cellIndex");
order = ($(this).is(".headerSortDown")) ? 1 : 0;
$("table.tablesorter").tablesorter({sortList: [[index,order]]});
});
});
Any tips on how to clean this up?
Based on feedback below from Nick Craver, the following code seems to work well:
$("table.tablesorter").tablesorter({widgets: ['zebra']}).bind("sortEnd", function() {
var current = $(this);
if (current.data("sorting")) {
current.data("sorting", false);
return false;
}
$(this).find("th.headerSortDown,.headerSortUp").each(function(i) {
index = $(this).attr("cellIndex");
order = ($(this).is(".headerSortDown")) ? 1 : 0;
$("table.tablesorter").not(current).data("sorting", true).trigger("sorton", [[[index,order]]]);
});
});
You can use
.data()to “tag” the other tables telling them not to execute this handler after the current sort, like this:This stores a boolean in the data cache on all the other tables (already filtered out
thisone from running again filtering it with.not()). When the handler executes, it checks if this value is present, if so toggles it off for the next sort, but skips the loop that triggers other tables to sort again.