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">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-stickyHeaders.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th class="sorter-false">Geometry</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Student01</td>
<td>Languages</td>
<td>male</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td>80</td>
</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td>90</td>
</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>95</td>
<td>80</td>
<td>85</td>
</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
<td>60</td>
<td>55</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>Student05</td>
<td>Languages</td>
<td>female</td>
<td>68</td>
<td>80</td>
<td>95</td>
<td>80</td>
</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
...
JavaScript
/* Documentation for this tablesorter FORK can be found at
* http://mottie.github.io/tablesorter/docs/
*/
$(function () {
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'stickyHeaders'],
widgetOptions: {
// extra class name added to the sticky
// header row
stickyHeaders: '',
// number or jquery selector targeting
// the position:fixed element
stickyHeaders_offset: 0,
// added to table ID, if it exists
stickyHeaders_cloneId: '-sticky',
// trigger "resize" event on headers
stickyHeaders_addResizeEvent: true,
// if false and a caption exist, it won't
// be included in the sticky header
stickyHeaders_includeCaption: true,
// The zIndex of the stickyHeaders, allows
// the user to adjust this to their needs
stickyHeaders_zIndex: 2,
// jQuery selector or object to attach
// sticky header to
stickyHeaders_attachTo: null,
// jQuery selector or object to monitor
// horizontal scroll position
// (defaults: xScroll > attachTo > window)
stickyHeaders_xScroll: null,
// jQuery selector or object to monitor
// vertical scroll position
// (defaults: yScroll > attachTo > window)
stickyHeaders_yScroll: null,
// scroll table top into view after filtering
stickyHeaders_filteredToTop: true
}
});
});