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>
<button class="reset">Reset</button>
<br>
<!-- 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 id="yui"...

JavaScript

$(function () {

    $("#yui")
    .on('filterEnd filterReset pagerComplete', function(e, table){
        var fr, table = this;
        if (table.config.pager) {
            $.tablesorter.showError(table);
            fr = table.config.pager.filteredRows;
            if (fr === 0) {
                $.tablesorter.showError(table, "No Data Found");
            }
        }
    })
    .tablesorter({
        theme: 'blue',
        widthFixed: false,
        widgets: ["zebra", "filter"],
        widgetOptions: {
            filter_cssFilter: '',
            filter_childRows: false,
            filter_ignoreCase: true,
            filter_reset: '.reset',
            filter_saveFilters: true,
            filter_searchDelay: 300,
            filter_startsWith: false,
            filter_hideFilters: false,
            filter_functions: {}
        }
    })
    .tablesorterPager({
        container: $(".pager"),
        positionFixed: false,
        size: 10
    });

});