Tablesorter demo
All options included, as well as the uitheme widget
HTML
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.black-ice.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<table class="tablesorter">
<thead>
<tr>
<th class="filter-select filter-match">Animals</th>
</tr>
</thead>
<tbody>
<tr>
<td>Koala</td>
</tr>
<tr>
<td>Ox, Bison</td>
</tr>
<tr>
<td>Girafee, Ox</td>
</tr>
<tr>
<td>Bison, Chimp</td>
</tr>
<tr>
<td>Chimp</td>
</tr>
<tr>
<td>Elephant</td>
</tr>
<tr>
<td>Lion</td>
</tr>
<tr>
<td>Zebra, Lion</td>
</tr>
<tr>
<td>Koala</td>
</tr>
<tr>
<td>Llama</td>
</tr>
</tbody>
</table>
JavaScript
/* Documentation for this tablesorter FORK can be found at
* http://mottie.github.io/tablesorter/docs/
*/
$(function() {
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter'],
widgetOptions: {
filter_selectSource: function(table, column, onlyAvail) {
var array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
return array.join(',').split(/\s*,\s*/);
}
}
});
});