Tablesorter demo
All options included, as well as the uitheme widget
by Mottie
HTML
<link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css">
<script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script>
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>9.99</td>
<td>20.3%</td>
<td>30 Jan 2013</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>10 Jan 2013</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>01 Feb 2013</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>30 Aug 2013</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td>20 Jan 2013</td>
</tr>
</tbody>
</table>
JavaScript
$.tablesorter.addParser({
id: "date",
is: function (s) {
return false;
},
format: function (s, table) {
return new Date(s).getTime() || '';
},
type: "numeric"
});
$('table').tablesorter({
// customize header HTML
headers: {
5: { sorter: 'date' }
}
});