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:

[code lang=”javascript”]
$("table.sortable").tablesorter();
[/code]

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.

[code lang=”javascript”]
$.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"); }
);
}
});
[/code]