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="https://rawgit.com/Mottie/tablesorter/master/js/widgets/widget-scroller.js"></script>
<div> Content above the table </div>

<table>
    <thead>
        <tr>
            <th>Index</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>ID</th>
            <th>Address</th>
            <th>State</th>
            <th>Zip</th>
            <th>Telephone</th>
            <th>Email</th>
            <th>Notes</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Index</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>ID</th>
            <th>Address</th>
            <th>State</th>
            <th>Zip</th>
            <th>Telephone</th>
            <th>Email</th>
            <th>Notes</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Sherry</td>
            <td>Mills</td>
            <td>223</td>
            <td>3792 Sit Rd</td>
            <td>NE</td>
            <td>69836</td>
            <td>(627) 124-8760</td>
            <td>[email protected]</td>
            <td>sagittis amet mattis facilisis vitae molestie nec dolor id sed</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Markella</td>
            <td>Lessenberry</td>
            <td>895</td>
            <td>5979 Sit Ln</td>
            <td>VA</td>
            <td>97761</td>
            <td>(768) 233-5399</td>
            <td>[email protected]</td>
            <td>elementum nullam lacus elit magna libero sed dolor pulvinar orci</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Lee</td>
            <td>Trenkelbach</td>
            <td>719</td>
            <td>5656...

CSS

table tbody td {
	/* force "Notes" column to not wrap, so we get a horizontal scrolling demo! (optional css) */
	white-space: nowrap;
	/* Add min column width, or "Index" column filter gets too narrow to use (optional css) */
	min-width: 60px;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function () {

    var throttle,
    $table = $('table'),
        
    setHeight = function(init){
        var windowHt = $(window).height(),
            tableHt = $table.children('thead').height() +
                $table.children('tfoot').height() +
                25; // extra padding at the top of the table
        if (init) {
            return windowHt - tableHt;
        } else {
            // multiply tableHt x 2 because it works??
            $table.parent().css('max-height', windowHt - tableHt * 2);
            $table.trigger('setFixedColumnSize');
        }
    };
    $(window).resize(function(){
        clearTimeout(throttle);
        throttle = setTimeout(function(){
            setHeight();
        }, 10);
    });
    
    $table.tablesorter({
        theme: 'blue',
        // widthFixed: true, // <- now automatically set by the scroller widget
        showProcessing: true,
        widgets: ['zebra', 'scroller'],
        widgetOptions: {
            scroller_fixedColumns: 1,
            scroller_height: setHeight(true),
            // scroll tbody to top after sorting
            scroller_upAfterSort: true,
            // pop table header into view while scrolling up the page
            scroller_jumpToHeader: true
        }
    });

});