Just Another Sortable Table Plugin

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.

Set up

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>
			

Live Example

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.