bind to sort event

 

I used the excellent jQuery tablesorter plugin yesterday to allow me to sort statistics being displayed in a table. The requirement was to be able to sort and export data in the currently sorted order to an Excel table. My method involved binding a function to the event when sorting ended. A simple

$("#idOfTable").tablesorter();

provided me with basic functionality and I was amazed at how fast the data was sorted. Excellent! the next stage was to restrict sorting so that one column could not be used to sort data. A simple update to

$("#idOfTable").tablesorter({
headers: {
2: {
sorter: false
}
}
});

This deactivates the header in the third column (the counter starts at 0).

Now the client wanted the ability to link and save sorted by a specific field.

The initial sort was carried out by the backend which, in this case was done in XSL.















We bind our function to manipulate the href of our export link (to add the parameters for the current sort order) as such:

$("#countries").bind("sortEnd",function() {
$('#countries thead tr th').each(
function(a){
var index=$(this).index();
var sortUp=$(this).is('.headerSortUp');
var sortDown=$(this).is('.headerSortDown');
var columnName = $(this).attr("name").toString().toLowerCase();
//Look to see which column currently has the sorting
if((sortUp == true)||(sortDown == true)){
switch(columnName){
case "country":
var columnSortName = "country";
break;
case "subscriber":
var columnSortName = "subscriber";
break;
case "total":
var columnSortName = "total";
break;
}
//Look to see which direction is currently being sorted
if(sortUp == true){
var sortDir = "&direction=descending"
}else if(sortDown == true){
var sortDir = "&direction=ascending"
}
var hashedURL="http://www.domain.com/exportLink?"
countriesParams = sortDir+"&countriesSort="+columnSortName;
//Change the href of our export link
$("#exportLnk").attr("href",hashedURL+countriesParams);
}
}
);
});

The function above is bound to the sortEnd Event provided by the tablesorter plugin, meaning that anytime the table is sorted the function is executed.
I'm using the classes added to the headers by tablesorter to ascertain whether the sort direction is ascending or descending. Using the .each loop I can also find out which column is being sorted by. This required a slight change to my normal table markup by adding a name attribute to the table header. the last stage rewrites the href of the URL to point to our export page with the current sort parameters. Simples