tablesorter

 

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

tablesorter jQuery – how to exclude rows

Posted on: May 10th, 2013 by taff 8 Comments

 

The tablesorter plugin from jQuery is great when I have some data which I want to sort.

Calling

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

would allow me to sort markup such as by clicking on the headers:

<table class="tablesorter" id="tmp">
	<thead>
		<tr>
			<th>Area</th>
			<th>Total Visitors</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Javascript</td>
			<td>15</td>
		</tr>
		<tr>
			<td>PHP</td>
			<td>3</td>
		</tr>
		<tr>
			<td>HTML5</td>
			<td>32</td>
		</tr>
		<tr>
			<td>CSS</td>
			<td>14</td>
		</tr>
		<tr>
			<td>XML</td>
			<td>54</td>
		</tr>
		<tr>
			<td><strong>Total</strong></td>
			<td><strong>118</strong></td>
		</tr>
	</tbody>
</table>

Easy peasy...No wait, I dont like how it is sorting the totals which are bold.
Sorting the Total Visitors row only would make it better and I could accomplish it by changing my javascript tablesorter call to

$("#tmp").tablesorter({
	headers: { 
		1: { 
			sorter: false 
		} 
	} 
});

which disables clicking of the second field (1 is the second field here, as 0 is the first, thus disabling a column. This makes it a little tidier but not really what we want. Ideally we want it to sort all the rows but leave the last one alone.

Not including the last row when sorting

I looked online and found a plugin which allows for static data whilst sorting.
Sounds like a little bit of an overkill for our example so I looked at how tablesorter works. The HTML needs to have a specific setup with thead and tbody tags.
So theoretically I could put my last row into a tfoot tag and it wouldnt be affected by sorting. So off I went and updated my markup to

<table class="tablesorter" id="tmp">
	<thead>
		<tr>
			<th>Area</th>
			<th>Total Visitors</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Javascript</td>
			<td>15</td>
		</tr>
		<tr>
			<td>PHP</td>
			<td>3</td>
		</tr>
		<tr>
			<td>HTML5</td>
			<td>32</td>
		</tr>
		<tr>
			<td>CSS</td>
			<td>14</td>
		</tr>
		<tr>
			<td>XML</td>
			<td>54</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td><strong>Total</strong></td>
			<td><strong>118</strong></td>
		</tr>
	</tfoot>
</table>

and hey presto it works. I hope this comes in handy for someone trying to sort columns with the jQuery tablesorter plugin apart from the last one(s).