Easy table sorting with jQuery
I came across a jQuery plug-in the other day to sort tables, and it works great and is exceptionally simple to implement (and as anyone who’s flicked through this blog knows, I like the simple things in life… Don’t need any more gray hairs popping up, you know!).
The plug-in is called tablesorter (found at tablesorter.com), by Christian Bach.
As I mentioned, it’s really simple to implement:
$("table.sortable").tablesorter();
But also gives you the ability to add extra functionality by the use of ‘widgets’. One example of a widget from the tablesorter site is to add headers every number of rows. Here’s my rather paltry contribution to the widgets – highlighting rows when you hover over them.
$.tablesorter.addWidget({ id: "highlightOnHover", format: function(table) { $("tbody tr.highlight", table).remove(); $("tbody tr", table).hover( function(){ $(this).children("td").addClass("highlight"); }, function(){ $(this).children("td").removeClass("highlight"); } ); } });
3 Responses
Leave a Reply
You must be logged in to post a comment.
Hi Andy,
This is a bit off topic but I have not heard from you in a long time and I was wondering what was up. I noticed all the topics on your PHP forum are locked and the talker site seems to be down (always just says “It works!” or some such).
I was not sure what the best way to contact you was.
Cheers,
Uzume
I am using this sorting library too. Have you run into an issue with sorting percents?
Given the following values { 2.0%, 25%, 10% }, the library will sort the values as {10%, 2.0%, 25% } because of the plain text sorting on the 1 versus the 2 (in both 2.0 and 25).
bnaffas; have you tried creating your own parser for the column that contains the percentages? Something like:
And than you include it such as:
where ‘3’ is the column number where your percentages are.
As I’ve just got it together this morning, I can’t promise the above is exact! 🙂