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 class="ts-scroller-rtl">
  <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...

CSS

.tablesorter-scroller {
  direction: rtl;
}

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/
 */

// change the class name before document ready
$.tablesorter.css.scrollerRtl = "ts-scroller-rtl";

$(function() {

  $('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
    }
  });

});