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>
<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>Rank</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Jun 26, 2004 7:22 AM more junk</td>
        </tr>
        <tr>
            <td>11</td>
            <td>Aug 21, 2009 12:21 PM blah</td>
        </tr>
        <tr>
            <td>12</td>
            <td>Oct 13, 2000 1:15 PM</td>
        </tr>
        <tr>
            <td>111</td>
            <td>Jul 6, 2006 8:14 AM</td>
        </tr>
        <tr>
            <td>21</td>
            <td>Dec 10, 2002 5:14 AM Hello kitty</td>
        </tr>
        <tr>
            <td>013</td>
            <td>Jan 12, 2003 11:14 AM</td>
        </tr>
        <tr>
            <td>005</td>
            <td>Jan 18, 2021 9:12 AM hello</td>
        </tr>
        <tr>
            <td>10</td>
            <td>Jan 8, 2012 5:11 PM</td>
        </tr>
        <tr>
            <td>16</td>
            <td>Jan 14, 2004 11:23 AM</td>
        </tr>
        <tr>
            <td>166</td>
            <td>Jan 18, 2007 9:12 AM</td>
       ...

JavaScript

$.tablesorter.addParser({
    id: "dates",
    is: function (s) {
        // don't auto detect this parser
        return false;
    },
    format: function (s, table) {
        var date = s.match(/^[A-Z]{3,10}\.?\s+\d{1,2},?\s+(?:\d{4})(?:\s+\d{1,2}:\d{2}(?::\d{2})?(?:\s+[AP]M)?)?/i)[0];
        return date ? $.tablesorter.formatFloat((new Date(date).getTime() || ''), table) || s : s;
    },
    type: "numeric"
});

$('table').tablesorter({
    theme: 'blackice',
    headers : {
        1 : { sorter : 'dates' }
    },
    widgets: ['zebra', 'columns']
});