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>
Scroll to row: <button type="button">20</button> <button type="button">40</button>

<table id="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>
           ...

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 $table = $('#table').tablesorter({
        theme: 'blue',
        // widthFixed: true, // <- now automatically set by the scroller widget
        showProcessing: true,
        widgets: ['zebra', 'scroller'],
        widgetOptions: {
            scroller_fixedColumns: 1,
            scroller_height: 300,
            // scroll tbody to top after sorting
            scroller_upAfterSort: true,
            // pop table header into view while scrolling up the page
            scroller_jumpToHeader: true
        }
    });

		$('button').click(function(){
    	var $scroller = $('.tablesorter-scroller-table'),
      	row = parseInt( $(this).text(), 10 ),
      	position = $table.find('tbody tr').eq(row).position();
      $scroller.scrollTop( $scroller.scrollTop() + position.top );
    });

});