Tablesorter
All options included, as well as the uitheme widget
by acjackson911
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>
<thead>
<tr>
<th class="sorter-false" colspan="3">category</th>
</tr>
<tr>
<th class="sorter-myparser">— should be "small"</th>
<th class="sorter-myparser">another myparser col</th>
<th>default parser</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>50</td>
<td>200</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>—</td>
</tr>
<tr>
<td>20</td>
<td>—</td>
<td>4</td>
</tr>
<tr>
<td>—</td>
<td>66</td>
<td>33</td>
</tr>
</tbody>
<table>
JavaScript
$.tablesorter.addParser({
// set a unique id
id: 'myparser',
is: function (s) {
// return false so this parser is not auto detected
return false;
},
format: function (s) {
// format your data for normalization
return s.replace('—', 0)
},
// set type, either numeric or text
type: 'numeric'
});
$('table').tablesorter({
theme: 'blue',
});