Tablesorter demo

All options included, as well as the uitheme widget

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric</th>
            <th>Numeric</th>
            <th>Animals</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>abc 123</td>
            <td>10</td>
            <td>Koala</td>
            <td>10:20:01</td>
        </tr>
        <tr>
            <td>abc 1</td>
            <td>234</td>
            <td>Ox</td>
            <td>5:10:22</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>10</td>
            <td>Girafee</td>
            <td>99:10:60</td>
        </tr>
        <tr>
            <td>zyx 24</td>
            <td>767</td>
            <td>Bison</td>
            <td>5:22:11</td>
        </tr>
        <tr>
            <td>abc 11</td>
            <td>3</td>
            <td>Chimp</td>
            <td>3:54:16</td>
        </tr>
        <tr>
            <td>abc 2</td>
            <td>56</td>
            <td>Elephant</td>
            <td>4:11:1</td>
        </tr>
        <tr>
            <td>abc 9</td>
            <td>155</td>
           ...

JavaScript

$(function () {

    // change maxDigits to 4, if values go > 999
    // or to 5 for values > 9999, etc.
    var maxDigits = 3;

    $.tablesorter.addParser({
        id: "times",
        is: function (s) {
            return false;
        },
        format: function (s) {
            // prefix contains leading zeros that are tacked
            var prefix = new Array(maxDigits + 1).join('0'),
                // split time into blocks
                blocks = s.split(/\s*:\s*/),
                len = blocks.length,
                result = [];
            // add values in reverse, so if there is only one block
            // (e.g. "10"), then it would be the time in seconds
            while (len) {
                result.push((prefix + (blocks[--len] || 0)).slice(-maxDigits));
            }
            // reverse the results and join them
            return result.length ? result.reverse().join('') : s;
        },
        type: "text"
    });

    $('table').tablesorter({
        theme: 'blue',
        headers: {
            3: {
                sorter: 'times'
            }
        }
    });
});