Tablesorter demo
All options included, as well as the uitheme widget
by csnsgiri
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>currency</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>9.99</td>
<td>20.3%</td>
<td><i>Rs.</i> 70,000.00</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td><i>Rs.</i> 50,000.00</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td><i>Rs.</i> 1,00,000.00</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td><i>Rs.</i> 10,000.00</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td><i>₹</i> 1,000.00</td>
</tr>
</tbody>
</table>
JavaScript
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: 'rupee',
is: function (s) {
// return false so this parser is not auto detected
return false;
},
format: function (s, table, cell) {
s = $(cell).contents().filter(function(){ return this.nodeType === 3; }).text();
return s.replace(/[\s,]/g,'');
},
// set type, either numeric or text
type: 'numeric'
});
$(function () {
$("table").tablesorter({
headers: {
5: { sorter: 'rupee' }
}
});
});