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 width="39" class="header headerSortDown"><span>ID</span></th>
<th width="145" class="header"><span>Player</span></th>
<th width="120" class="header"><span>School</span></th>
<th width="65" class="header"><span>Ht.</span></th>
<th width="65" class="header"><span>Wt.</span></th>
<th width="65" class="header"><span>Forty</span></th>
<th width="65" class="header"><span>Bench</span></th>
<th width="65" class="header"><span>Vert.</span></th>
<th width="65" class="header"><span>Broad</span></th>
<th width="65" class="header"><span>Shut.</span></th>
<th width="65" class="header"><span>Cone</span></th>
<th width="65" class="header"><span>Arm</span></th>
<th width="65" class="header"><span>Hand</span></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>DB01</td>
<td><a href="/rankings/2012/s/antonio-allen/">Antonio Allen</a></td>
<td>South Carolina</td>
<td>6014</td>
<td>210</td>
<td>4.67</td>
<td>17</td>
<td>34</td>
<td>9'10"</td>
<td>4.25</td>
<td>7.02</td>
<td>32½</td>
<td>9⅜</td>
</tr><tr class="even">
<td>DB02</td>
<td><a href="/rankings/2012/s/mark-barron/">Mark Barron</a></td>
<td>Alabama</td>
<td>6011</td>
<td>213</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
...
JavaScript
$(function(){
$.tablesorter.addParser({
// set a unique id
id: 'distance',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
if (s === '') { return ''; }
var d, f, i = 0, t, p = 0;
// look for feet symbol = '
d = (/^(\s+)?\d+(\s+)?\'/.test(s)) ? s.split("'") : [0,s];
// *** feet ***
f = d[0];
// *** inches ***
if (typeof(d[1]) !== 'undefined') {
// trim outside spaces and remove the inches symbol = "
i = $.trim(d[1].replace(/\"/,''));
// look for a space in the first part of the inches: "10 3/4" and save the "10"
if (/\s/.test(i)) {
p = parseFloat(i.split(' ')[0]);
// remove stuff to the left of the space
i = $.trim(i.substring(i.indexOf(' '), i.length));
}
// look for a "/" to calculate fractions
if (/\//.test(i)) {
t = i.split('/');
// turn 3/4 into .75; make sure we don't divide by zero
i = p + parseInt(t[0], 10) / parseInt(t[1] || 1, 10);
// look for non-words (anything but the below symbols will be replaced with "undefined")
} else if (/\W/.test(i)) {
i = p + i.replace(/\W/g, function(m){
return {
'.' : '.', // leave decimal, just in case
'⅛' : '.125', // 1/8
'⅜' : '.375', // 3/8
'⅝' : '.625', // 5/8
'⅞' : '.875', // 7/8
...