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"> <span class="pagedisplay"></span> 
    <!-- this can be any element, including an input -->
</div>
<table class="tablesorter">
    <thead>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>Sex</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>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>
  ...

CSS

.left { float: left; }
.right {
    float: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}
.pager .prev, .pager .next, .pagecount { cursor: pointer; }
.pager a {
    color: black;
}
.pager a.current {
    text-decoration: none;
    color: #0080ff;
}

JavaScript

var $table = $('table')
    .on('pagerInitialized pagerComplete', function (e, c) {
        var i, pages = '', t = [],
            cur = c.page + 1,
            start = cur > 1 ? (c.totalPages - cur < 3 ? -3 + (c.totalPages - cur) : -1) : 0,
            end = cur < 3 ? 5 - cur : 2;
        for (i = start; i < end; i++) {
            if (cur + i >= 1 && cur + i < c.totalPages) { t.push( cur + i ); }
        }
        // make sure first and last page are included in the pagination
        if ($.inArray(1, t) === -1) { t.push(1); }
        if ($.inArray(c.totalPages, t) === -1) { t.push(c.totalPages); }
        // sort the list
        t = t.sort(function(a, b){ return a - b; });
        // make links and spacers
        $.each(t, function(j, v){
            pages += '<a href="#" class="' + (v === cur ? 'current' : '') + '">' + v + '</a>';
            pages += j < t.length - 1 && ( t[j+1] - 1 !== v ) ? ' ... ' : ( j >= t.length - 1 ? '' : ' | ' );
        });
        $('.pagecount').html(pages);
    })
    .tablesorter({
        theme: 'blackice',
        widgets: ['zebra', 'columns']
    })
    .tablesorterPager({
        // target the pager markup - see the HTML block below
        container: $(".pager"),
        size: 5,
        output: 'showing: {startRow} to {endRow} ({totalRows})'
    });

// set up pager controls
$('.pager .left a').on('click', function () {
    $(this)
        .addClass('current')
        .siblings()
        .removeClass('current');
    $table.trigger('pageSize', $(this).html());
    return false;
});
$('.pager .right .pagecount').on('click', 'a', function(){
    $(this)
        .addClass('current')
        .siblings()
        .removeClass('current');
    $table.trigger('pageSet', $(this).html());
    return false;
});