Tablesorter demo

All options included, as well as the uitheme widget

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">
<button type="button" class="btn btn-default btn-xs btn-filter" id="filter"><span class="fa fa-filter"></span> Filter</button>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th class="sorter-false">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>
     ...

CSS

.filterable .panel-heading .pull-right {
  margin-top: -20px;
}

.tablesorter .hidden {
  display: none;
}

.tablesorter thead .disabled {
  display: none;
}

.tablesorter-filter input[disabled] {
  background-color: transparent;
  border: none;
  cursor: auto;
  box-shadow: none;
  padding: 0;
  height: auto;
}

.tablesorter-filter input[disabled]::-webkit-input-placeholder {
  color: #333;
}

.tablesorter-filter input[disabled]::-moz-placeholder {
  color: #333;
}

.tablesorter-filter input[disabled]:-ms-input-placeholder {
  color: #333;
}

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {

  var $table = $('table'),
    bindFilterButton = function() {
      $('#filter').click(function() {
        // reset filters
        $.tablesorter.setFilters($table, []);
        $table.toggleClass('filtered');
        // this targets the table filter row and the stickyheader filter row
        $('.tablesorter-filter-row').toggleClass('hidden');
        return false;
      })
      // initially hide filter row
      .click();
    };

  $('table').tablesorter({
    theme: 'blue',
    widthFixed: true,
    widgets: ['zebra', 'filter', 'stickyHeaders'],
    widgetOptions: {
      // filter_reset: 'button.btn-filter'
    },
    initialized: bindFilterButton
  });

});