Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/blue/style.css">
<table class="tablesorter">
    <thead>
        <tr>
            <th>Alphanumeric</th>
            <th>Number</th>
            <th>Animals</th>
            <th>Date JJ-MM-AAAA</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>abc 123</td><td>10</td><td>Koala</td><td>7-08-2011</td></tr>
        <tr><td>abc 1</td><td>234</td><td>Ox</td><td>1-11-2011</td></tr>
        <tr><td>abc 9</td><td>10</td><td>Girafee</td><td>3-3-2011</td></tr>
        <tr><td>zyx 24</td><td>767</td><td>Bison</td><td>5-5-2011</td></tr>
        <tr><td>abc 11</td><td>3</td><td>Chimp</td><td>11-1-2011</td></tr>
        <tr><td>abc 2</td><td>56</td><td>Elephant</td><td>27-8-2011</td></tr>
        <tr><td>abc 9</td><td>155</td><td>Lion</td><td>13-09-2011</td></tr>
        <tr><td>ABC 10</td><td>87</td><td>Zebra</td><td>7-9-2011</td></tr>
        <tr><td>zyx 1</td><td>999</td><td>Koala</td><td>22-9-2011</td></tr>
        <tr><td>zyx 12</td><td>0</td><td>Llama</td><td>22-07-2011</td></tr>
    </tbody>
</table>

JavaScript

$.tablesorter.addParser({
    // set a unique id 
    id: 'jjmmaaaa',
    is: function(s) {
        return (/\d{1,2}[\/\-]\d{1,2}[\/\-]\d{2,4}/).test(s);
    },
    format: function(s) {
        var date = s.split('-');
        return new Date(date[2], date[1], date[0]).getTime();
    },
    type: 'numeric'
});

$(function() {
    $('table').tablesorter({

        // These are detected by default,
        // but you can change or disable them
        headers: {
            3: { sorter: "jjmmaaaa" }
        }
    });
});