how to get current sort order from tablesorter plugin?
-
21-09-2019 - |
Question
I'm just starting to use Christian Bach's excellent TableSorter plugin, and I need to get a column's current sort direction. I have several columns:
- ID
- Name
- Category
ID and Name are set to non-sortable using
headers: { 0: {sorter: false}, 1: {sorter: false} }
I'm adding a click handler on Name so that it fires the sort event on the Category column. Using the example "Sort table using a link outside the table", I'm able to get the Name header to fire the Category sort -- but it's hard-coded to sort in one direction.
How can I get it to look at the current direction the Category column is currently sorted, and sort in the opposite direction? (I can handle flipping the values; since the sort order is 0 or 1, I can XOR the value to get the opposite, like var sort; sort ^= sort;
-- my question is how to get the current value.
Here's the code that currently sets the click handler on the Name column:
$("#nameCol").click(function() {
var sorting = [[2, 0]]; /* sort 3rd col (Category) descending */
$("#SearchResults").trigger("sorton", [sorting] ); /* SearchResults is the ID of the sortable table */
return false; /* cancel default link action on a#nameCol */
});
Thanks!
Solution
The table headers should all call the same click event:
$('th').click(function() {
handleHeaderClick(this);
});
Then click handler should add/remove the applicable classes.
function handleHeaderClick(hdr) {
if ($(hdr).hasClass('headerSortDown') == true) {
$(hdr).removeClass('headerSortDown');
$(hdr).addClass('headerSortUp');
} else if ($(hdr).hasClass('headerSortUp') == true) {
$(hdr).removeClass('headerSortUp');
$(hdr).addClass('headerSortDown');
} else {
$('th', myTable).removeClass('headerSortUp headerSortDown');
$(hdr).addClass('headerSortDown');
}
doSomething();
};
I hope this helps.
OTHER TIPS
You can use the built in sortEnd
event to get the sortOrder as explained here: https://stackoverflow.com/a/4150187/363155
$('#yourtableId').on('sortEnd', function(event) {
// Prints the current sort order to the console
console.log(event.target.config.sortList);
});
You can also capture it outside, anywhere else (e.g. in your function, start of ajax, ..), and only when needed and not on every click, with a bit less overhead like this:
lastSortList=$("#mytable")[0].config.sortList;
And example for sorting it back after ajax update:
$("#mytable").trigger("sorton", [lastSortList]);
Remember to declare the first line in the right scope though.
I wrote a function to save the current sort order. This helped me out in a situation where the table was being rebuilt from scratch.
function SaveSortOrder(tablename) {
//returns an array of a tablesorter sort order
var hdrorder = new Array();
var hdrs = $("#" + tablename + " th");
var arrayindex = 0;
hdrs.each(function (index) {
if ($(this).hasClass('headerSortDown')) {
hdrorder[arrayindex] = [index, 0];
arrayindex++;
}
else if ($(this).hasClass('headerSortUp')) {
hdrorder[arrayindex] = [index, 1];
arrayindex++;
}
});
return hdrorder;
}