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>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-sortTbodies.js"></script>
<table>
<thead>
<tr>
<th class="rank">Rank</th>
<th>First Name</th>
<th>Last Name</th>
<th>Superhero Name</th>
</tr>
</thead>
<tbody class="tablesorter-infoOnly">
<tr class="main"><td>3</td><td>Bruce</td><td>Wayne</td><td>Batman</td></tr>
<tr><td colspan="4">Batman is the superhero protector of Gotham City, a man dressed like a bat who fights against evil and strikes terror into the hearts of criminals everywhere. In his secret identity he is Bruce Wayne, billionaire industrialist and notorious playboy. Although he has no superhuman powers, he is one of the world's smartest men and greatest fighters. His physical prowess and technical ingenuity make him an incredibly dangerous opponent. He is also a founding member of the Justice League and the Outsiders.</td></tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr class="main"><td>4</td><td>Hal</td><td>Jordan</td><td>Green Latern</td></tr>
<tr><td colspan="4">Hal Jordan is the most well-known Green Lantern. He was the first earthman ever inducted into the Green Lantern Corps, and has been heralded as possibly the greatest Green Lantern of all time. Green Lantern is also a founding member of the Justice League of America.</td></tr>
</tbody>
<tbody class="tablesorter-infoOnly">
<tr class="main"><td>2</td><td>Clark</td><td>Kent</td><td>Superman</td></tr>
<tr><td colspan="4">Superman, also known as the Man of Steel, is one of the most powerful superheroes in the DC Universe. His abilities include incredible super-strength, super-speed, invulnerability, freezing breath, flight, and heat-vision.</td></tr>
</tbody>
<tbody...
JavaScript
/* Documentation for this tablesorter FORK can be found at
* http://mottie.github.io/tablesorter/docs/
*/
$(function () {
$( 'table' ).tablesorter({
theme: 'blue',
widgets: [ 'sortTbody', 'filter', 'zebra' ],
widgetOptions: {
sortTbody_primaryRow : '.main',
sortTbody_sortRows : false,
sortTbody_noSort : 'tablesorter-no-sort-tbody',
sortTbody_lockHead : true,
// include child row content while filtering the second demo table
filter_childRows : true
}
});
});