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">
<table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th class="sorter-weekday">Weekday</th>
<th class="sorter-month">Month</th>
<th>Year</th>
<th class="sorter-time">Time</th>
</tr>
</thead>
<tbody>
<tr><td>Peter</td><td>Friday</td><td>Aug</td><td>2012</td><td>12:00 PM</td></tr>
<tr><td>Bruce</td><td>Thurs</td><td>September</td><td>2012</td><td>00:00</td></tr>
<tr><td>Clark</td><td>Fri</td><td>Mar</td><td>2010</td><td>18:00</td></tr>
<tr><td>John</td><td>Wednesday</td><td>July</td><td>2013</td><td>13:00</td></tr>
<tr><td>Bruce</td><td>Monday</td><td>Jan</td><td>2011</td><td>1:30 PM</td></tr>
<tr><td>James</td><td>Tues</td><td>Nov</td><td>2011</td><td>14:00</td></tr>
</tbody>
</table>
CSS
/*
* Weekday and Month parsers are used in this demo
*/
JavaScript
/*
* Month parser
*/
;(function($){
"use strict";
$.tablesorter.language = $.extend({
monthShort : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
}, $.tablesorter.language);
$.tablesorter.language.monthShortLowerCase = $.tablesorter.language.monthShort.join(',').toLocaleLowerCase().split(',');
$.tablesorter.addParser({
id: "month",
is: function(){
return false;
},
format: function(s, table) {
var j = -1, c = table.config;
s = c.ignoreCase ? s.toLocaleLowerCase() : s;
$.each($.tablesorter.language[ 'monthShort' + (c.ignoreCase ? 'LowerCase' : '') ], function(i,v){
if (j < 0 && s.match(v)) { j = i; }
});
// return s (original string) if there isn't a match
// (non-weekdays will sort separately and empty cells will sort as expected)
return j < 0 ? s : j;
},
type: "numeric"
});
})(jQuery);
/*
* Weekday parser
*/
;(function($){
"use strict";
$.tablesorter.language = $.extend({
weekShort : [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]
}, $.tablesorter.language);
$.tablesorter.language.weekShortLowerCase = $.tablesorter.language.weekShort.join(',').toLocaleLowerCase().split(',');
$.tablesorter.addParser({
id: "weekday",
is: function(){
return false;
},
format: function(s, table) {
var j = -1, c = table.config;
s = c.ignoreCase ? s.toLocaleLowerCase() : s;
$.each($.tablesorter.language[ 'weekShort' + (c.ignoreCase ? 'LowerCase' : '') ], function(i,v){
if (j < 0 && s.match(v)) { j = i; }
});
// return s (original string) if there isn't a match
// (non-weekdays will sort separately and empty cells will sort as expected)
return j < 0 ? s : j;
},
type: "numeric"
});
})(jQuery);
$('table').tablesorter({
theme : 'blue',
widgets : ["zebra"]
});