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">
<a href="#" id="reset-link">reset</a>

<table id="mytable" class="tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th data-value="f">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>
      <td>male</td>
     ...

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  var $table = $('#mytable');
  $('#reset-link').click(function(e) {
    $table.trigger('filterReset').trigger('sortReset');
    return false;
  });
  $table.tablesorter({
    theme: 'blue',
    sortList: [[0, 0], [1, 0], [2, 0]],
    widgets: ['filter', 'zebra']
  });
});