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">
<script src="http://sugarjs.com/release/current/sugar.min.js"></script>
<table class="tablesorter">
<thead>
<tr>
<th>AlphaNumeric</th>
<th>Numeric</th>
<th>Animals</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr><td>abc 123</td><td>10</td><td>Koala</td><td>next friday</td></tr>
<tr><td>abc 1</td><td>234</td><td>Ox</td><td>today</td></tr>
<tr><td>abc 9</td><td>10</td><td>Girafee</td><td>last Tuesday</td></tr>
<tr><td>zyx 24</td><td>767</td><td>Bison</td><td>the day after tomorrow</td></tr>
<tr><td>abc 11</td><td>3</td><td>Chimp</td><td>2010-05-25T12:30:40.299+01:00</td></tr>
<tr><td>abc 2</td><td>56</td><td>Elephant</td><td>May 25th of next year</td></tr>
<tr><td>abc 9</td><td>155</td><td>Lion</td><td>25 May 2010</td></tr>
<tr><td>ABC 10</td><td>87</td><td>Zebra</td><td>the last day of March</td></tr>
<tr><td>zyx 1</td><td>999</td><td>Koala</td><td>last month</td></tr>
<tr><td>zyx 12</td><td>0</td><td>Llama</td><td>one day before yesterday</td></tr>
</tbody>
</table>
JavaScript
$.tablesorter.addParser({
id: "sugarDate",
is: function(s) {
return false;
},
format: function(s, table) {
return Date.create(s).getTime() || "";
},
type: "numeric"
});
$('table').tablesorter({
theme : 'blue',
headers: {
3: { sorter: "sugarDate" }
}
});