Tablesorter demo
All options included, as well as the uitheme widget
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>Row ID</th>
<th>AlphaNumeric</th>
<th>Numeric</th>
<th>Animals</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>row1</td>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr id="row2">
<td>row2</td>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr id="row3">
<td>row3</td>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr id="row4">
<td>row4</td>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr id="row5">
<td>row5</td>
<td>abc 11</td>
<td>3</td>
...
CSS
.spacer {
height: 1000px;
}
JavaScript
$('#gotorow').on('change', function () {
window.location.hash = "#row" + this.value;
var $row = $(window.location.hash),
table = $row.closest('table')[0],
// get sticky header height
ht = table.config.widgetOptions.$sticky.height() || 27;
$('body').scrollTop($row.position().top - ht);
});
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'stickyHeaders']
});