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">
<script src="http://mottie.github.com/tablesorter/js/widgets/widget-pager.js"></script>
<script src="https://rawgit.com/flaviusmatis/simplePagination.js/master/jquery.simplePagination.js"></script>
<table class="tablesorter-blue">
    <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>
            <td>Student02</td>
            <td>Mathematics</td>
            <td>male</td>
            <td>90</td>
            <td>88</td>
            <td>100</td>
            <td>90</td>
        </tr>
        <tr>
            <td>Student03</td>
            <td>Languages</td>
            <td>female</td>
            <td>85</td>
            <td>95</td>
            <td>80</td>
            <td>85</td>
        </tr>
        <tr>
            <td>Student04</td>
            <td>Languages</td>
            <td>male</td>
            <td>60</td>
            <td>55</td>
            <td>100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Student05</td>
            <td>Languages</td>
            <td>female</td>
            <td>68</td>
           ...

CSS

/**
* CSS themes for simplePagination.js
* Author: Flavius Matis - http://flaviusmatis.github.com/
* URL: https://github.com/flaviusmatis/simplePagination.js
*/
 ul.simple-pagination {
    list-style: none;
}
.simple-pagination {
    display: block;
    overflow: hidden;
    padding: 0 5px 5px 0;
    margin: 0;
}
.simple-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.simple-pagination li {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
}
/*------------------------------------*\
	Compact Theme Styles
\*------------------------------------*/
 .compact-theme a, .compact-theme span {
    float: left;
    color: #333;
    font-size:14px;
    line-height:24px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #AAA;
    border-left: none;
    min-width: 14px;
    padding: 0 7px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    background: #efefef;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #efefef));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #efefef 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #efefef 100%);
    /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #efefef 100%);
    /* IE10+ */
    background: linear-gradient(top, #ffffff 0%, #efefef 100%);
    /* W3C */
}
.compact-theme a:hover {
    text-decoration: none;
    background: #efefef;
    /* Old browsers */
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efefef), color-stop(100%, #bbbbbb));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
    /* Chrome10+,Safari5.1+ */
    background:...

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function () {
    var perPage = 10,
        $table = $('table');
    $table.tablesorter({
        widgets: ['zebra', 'filter', 'pager'],
        widgetOptions: {
            filter_columnFilters: false,
            pager_size: perPage
        },
        initialized: function (table) {
            /* 
            Using http://flaviusmatis.github.io/simplePagination.js/
            along with the pager widget
            */
            var pager = table.config.pager;
            $("#pagination").pagination({
                cssStyle: 'compact-theme',
                items: pager.totalRows,
                itemsOnPage: pager.size,
                onPageClick: function (pageNumber) {
                    $table.trigger('pageSet', pageNumber);
                }
            });
        }
    });

});