Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

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">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<!-- pager -->
<div class="pager">
	<img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/>
	<img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/>
	<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
	<img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/>
	<img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/>
	<select class="pagesize" title="Select page size">
		<option selected="selected" value="10">10</option>
		<option value="20">20</option>
		<option value="30">30</option>
		<option value="40">40</option>
	</select>
	<select class="gotoPage" title="Select page number"></select>
</div>

<table...

JavaScript

// add custom numbering widget
$.tablesorter.addWidget({
    id: "numbering",
    format: function(table) {
        var c = table.config;
        $("tr", table.tBodies[0]).each(function(i) {
            $(this).find('td').eq(0).text(i + 1);
        });
    }
});

$('table')
    .tablesorter({
        theme: 'blackice',
        // prevent first column from being sortable
        headers: {
            0: { sorter: false }
        },
        widgets: ['zebra', 'columns', 'numbering']
    })
    .tablesorterPager({
        container: $(".pager"),
        output: '{startRow} to {endRow} ({totalRows})'
    });