Tablesorter demo
All options included, as well as the uitheme widget
by Mottie
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>AlphaNumeric</th>
<th class="filter-select filter-match">Numeric</th>
<th>Animals</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>3</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
...
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_defaultFilter: {
// "all" will always show
1: '{q}|all'
}
}
});
});