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">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<table class="tablesorter">
  <thead>
    <tr>
      <!-- data-value sets initial filter search -->
      <th data-value="a">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>
     ...

CSS

tr.noData td {
  background: #eee;
  color: #900;
  text-align: center;
}

JavaScript

$(function() {

  $('table')
    .on('filterEnd filterReset', function(e, table) {
      var c = this.config,
        fr = c.filteredRows;
      if (fr === 0) {
        c.$table.append([
          '<tr class="noData remove-me" role="alert" aria-live="assertive">',
          '<td colspan="' + c.columns + '">No Data Found</td>',
          '</tr>'
        ].join(''));
      } else {
				c.$table.find('.noData').remove();
      }
    })
    .tablesorter({
      theme: 'blue',
      widthFixed: false,
      widgets: ["zebra", "filter"],
      widgetOptions: {
        filter_cssFilter: '',
        filter_childRows: false,
        filter_ignoreCase: true,
        filter_reset: '.reset',
        filter_saveFilters: true,
        filter_searchDelay: 300,
        filter_startsWith: false,
        filter_hideFilters: false,
        filter_functions: {}
      }
    });

});