Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.css">
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-scroller.js"></script>
<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 Adipiscing Ave</td>
      <td>ID</td>
      <td>30972</td>
      <td>(149) 293-0691</td>
      <td>[email protected]</td>
      <td>vestibulum at rutrum molestie convallis vestibulum nec egestas consequat vitae</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Sherrye</td>
      <td>Llc</td>
      <td>908</td>
      <td>2348 Pharetra St</td>
      <td>UT</td>
     ...

CSS

/* styling added when `scroller_addFixedOverlay` is true */
.tablesorter-scroller-fixed-panel {
  margin-top: 10px;
  margin-bottom: 15px;
  border-right: 2px solid black;
}

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() {

  $('table').tablesorter({
    theme: 'blue',
    // widthFixed: true, // <- now automatically set by the scroller widget
    showProcessing: true,
    widgets: ['zebra', 'scroller'],
    widgetOptions: {
      // This allows setting the number of fixed columns to add to the
      // scroller
      scroller_fixedColumns: 1,
      // Set the height of the scroll window in pixels
      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,
      // Setting this to true will add a fixed overlay which can be used
      // for styling; A class name of "tablesorter-scroller-fixed-panel"
      // is added to the overlay.
      scroller_addFixedOverlay: false,
      // Set the width of the scroll bar in pixels; set to `null` to have
      // the width calculated internally as it is dependent on the browser
      scroll_barWidth: null,
      // Set this to a class name to use when hovering over a fixed column
      // row
      scroller_rowHighlight: "hover"
    },
    initialized: function(table) {
      // Not an ideal solution to fix column alignment,
      // but it works (for now)
      $(table).resize();
    }
  });

});