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="http://mottie.github.com/tablesorter/js/widgets/widget-scroller.js"></script>
<table class="tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Student01</td>
      <td>Languages</td>
      <td>male</td>
      <td>80</td>
      <td>70</td>
      <td>75</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Student02</td>
      <td>Mathematics</td>
      <td>male</td>
      <td>90</td>
      <td>88</td>
      <td>100</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Student03</td>
      <td>Languages</td>
      <td>female</td>
      <td>85</td>
      <td>95</td>
      <td>80</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Student04</td>
      <td>Languages</td>
      <td>male</td>
      <td>60</td>
      <td>55</td>
      <td>100</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Student05</td>
      <td>Languages</td>
      <td>female</td>
      <td>68</td>
      <td>80</td>
      <td>95</td>
      <td>80</td>
    </tr>
    <tr>
      <td>Student06</td>
      <td>Mathematics</td>
      <td>male</td>
      <td>100</td>
      <td>99</td>
      <td>100</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Student07</td>
      <td>Mathematics</td>
      <td>male</td>
      <td>85</td>
      <td>68</td>
      <td>90</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Student08</td>
      <td>Languages</td>
     ...

CSS

/* adjust the result window height */

JavaScript

/* Documentation for this tablesorter FORK can be found at
* http://mottie.github.io/tablesorter/docs/
*/
$(function() {
  var newHeight = 400;
  var updateScroller = function(height) {
    $('.tablesorter-scroller-table').css({
      height: '',
      'max-height': height + 'px'
    });
  };

  $(window).bind("resizeEnd", function() {
    newHeight = $(window).height() - 100;
    updateScroller(newHeight);
  });

  $('table').tablesorter({
    delayInit: true,
    theme: 'blue',
    headerTemplate: "",
    widthFixed: false,
    fixedHeight: true,
    showProcessing: true,
    // debug: true,
    widgets: ['scroller', 'stickyHeaders'],
    ignoreCase: false,
    widgetOptions: {
      scroller_upAfterSort: true,
      scroller_jumpToHeader: true,
      scroller_height: newHeight,
      scroller_fixedColumns: 1,
      scroller_addFixedOverlay: false,
      scroller_barWidth: null,
      stickyHeaders_offset: 50,
    },
    initialized: function() {
      $(window).trigger("resize");
    }
  });
});