Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script src="https://rawgit.com/Mottie/tablesorter/master/js/jquery.tablesorter.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/jquery.tablesorter.widgets.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/addons/pager/jquery.tablesorter.pager.js"></script>
<script src="https://rawgit.com/Mottie/tablesorter/master/js/parsers/parser-input-select.js"></script>
<h2>Dynamic checkbox sorting w/Pager</h2>
<p>Check/uncheck the boxes in the first column, then sort</p>

<!-- 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 value="5">5</option>
            <option value="10">10</option> 
            <option value="20">20</option> 
        </select>
        <select class="gotoPage" title="Select page number"></select>
</div>

<table class="tablesorter">

     <thead>
         <tr>
             <th class="filter-false"><input type="checkbox"></th>
             <th>AlphaNumeric</th>
             <th>Numeric</th>
             <th>Animals</th>
             <th>Sites</th>
         </tr>
     </thead>

     <tbody>
         <tr><td><input type="checkbox"></td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
         <tr><td><input type="checkbox"></td><td>abc...

CSS

h2 { font-size: 130%; }
h2, p { text-align: center; }

table.tablesorter tbody tr.odd.checked td {
    background: #8080c0;
    color: #fff;
}
table.tablesorter tbody tr.even.checked td {
    background: #a0a0e0;
    color: #fff;
}
.tablesorter-filter.disabled {
    display: none;
}

.spacer { height: 1000px; }

JavaScript

/*
  header checkbox code added to parser-input-select.js in v2.24.6
*/
$(function() {
    var $table = $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter', 'stickyHeaders'],
        headers: {
            0: { sorter: 'checkbox' }
        }
    }).tablesorterPager({
        container: $(".pager"),
        output : '{startRow} to {endRow} of {filteredRows} rows',
        size: 5
    });
});