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">
<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 class="tablesorter">
<thead>
<tr>
<th>AlphaNumeric</th>
<th>Numeric with Php number_format fonction</th>
<th>Animals</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr><td>abc 123</td><td>230 000.00 €</td><td>Koala</td><td>http://www.google.com</td></tr>
<tr><td>abc 1</td><td>314 000.00 €</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
<tr><td>abc 9</td><td>11 917.00 €</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
<tr><td>zyx 24</td><td>230 000.00 €</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
<tr><td>abc 11</td><td>83 163.00 €</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
<tr><td>abc 2</td><td>154 805 000.00 €</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
<tr><td>abc 9</td><td>249 300.00 €</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
<tr><td>ABC 10</td><td>93 856.00 €</td><td>Zebra</td><td>http://www.google.com</td></tr>
<tr><td>zyx 1</td><td>635 000.00...
CSS
/* This class added to the header using "onRenderHeader" option */
.roundedCorners {
border: #777 1px solid;
padding: 0 10px;
border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
}
/* Add odd row color to uiwidget theme */
table.tablesorter tbody tr.odd td {
background: #fff;
}
JavaScript
$.tablesorter.addParser({
id: "currencyNuberFormat",
is: function(s) {
return (/^[\u00a3$\u20ac\u00a4\u00a5\u00a2?.]/).test(s); // £$€¤¥¢?.
},
format: function(s, table) {
return $.tablesorter
.formatFloat(s.replace(/\,/g, '.')
.replace(new RegExp(/[^0-9]/g), ""), table);
},
type: "numeric"
});
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra'],
headers: {
1: {
sorter: "currencyNuberFormat"
},
}
});