Takes a standard table and gives the ability to sort by columns. I originally put this together as a quick fix on an internal application for a corporate client. They needed sortable tables but with a very small footprint and without adding a lot of third party code to the server.
Installation is very much the same as any other jQuery plugin: add links to tablesorter/sorter.js and tablesorter/sorter.css files and call the .smartTable() method on your table ID. You will likely need to tweak the css, as I've not made much of an effort toward making the styles completely universal. There are, however, only 4 styles declared in the css, so modification shouldn't be difficult. (NOTE: This does require that jQuery be included before sorter.js and before calling the smartTable method)
$('#tableID').smartTable();
The only structural requirements are that your table has a tbody element and that column headers are within th tags. All other attributes and styles are added by the script itself.
<table class="table" id="tableID">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Favorite Color</th>
<th>Age</th>
<th>Vehicle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tom Cat</td>
<td>Green</td>
<td>6</td>
<td>Buick</td>
</tr>
(etc)
</tbody>
</table>
ID | Name | Favorite Color | Age | Vehicle |
---|---|---|---|---|
1 | Tom Cat | Green | 6 | Buick |
2 | Jerry Mouse | Blue | 6 | Honda |
3 | Fred Flintstone | Red | 99 | Ford |
4 | Speedy Gonzales | Purple | 11 | McLaren |
5 | George Jetson | Yellow | 55 | Subaru |
Grab the source code here. Feel free to use this on any project, personal or commercial, and to modify or re-package it any way you like. Hope it helps.