Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.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/addons/pager/jquery.tablesorter.pager.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<table class="tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th class="filter-select filter-exact">Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
    </tr>
  </thead>
  <tfoot>
    <tr class="tablesorter-ignoreRow">
      <th colspan="7" class="ts-pager form-horizontal">
        <button type="button" class="btn first"><i class="small material-icons">first_page</i></button>
        <button type="button" class="btn prev"><i class="small material-icons">navigate_before</i></button>
        <span class="pagedisplay"></span>
        <!-- this can be any element, including an input -->
        <button type="button" class="btn next"><i class="small material-icons">navigate_next</i></button>
        <button type="button" class="btn last"><i class="small material-icons">last_page</i></button>
        <select class="pagesize browser-default" title="Select page size">
          <option selected="selected" value="10">10</option>
          <option value="20">20</option>
          <option value="30">30</option>
          <option value="40">40</option>
        </select>
        <select class="pagenum browser-default" title="Select page number"></select>
      </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>
     ...

CSS

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';

/*************
  Materialize theme (http://materializecss.com/)
 *************/


/* jQuery materialize Theme */

.tablesorter-materialize {
  width: 100%;
}

.tablesorter-materialize thead th,
.tablesorter-materialize thead td,
.tablesorter-materialize tfoot th,
.tablesorter-materialize tfoot td {
  font: 14px/20px Arial, Sans-serif;
  font-weight: bold;
  padding: 4px;
  margin: 0 0 18px;
  background-color: #eee;
}

.tablesorter-materialize .tablesorter-header {
  cursor: pointer;
}

.tablesorter-materialize .sorter-false {
  cursor: default;
}

.tablesorter-materialize .tablesorter-header-inner {
  position: relative;
  padding: 4px 18px 4px 4px;
}


/* sort icons */

.tablesorter-materialize thead .tablesorter-header {
  background-repeat: no-repeat;
  background-position: center right;
  padding: 4px 18px 4px 4px;
  white-space: normal;
  cursor: pointer;
}


/* black unsorted icon */

.tablesorter-materialize thead .tablesorter-headerUnSorted {
  /* <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 16"><path d="M15 8 1 8 8 0zM15 9 1 9 8 16z" fill="#222"/></svg> */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgOCAxIDggOCAwek0xNSA5IDEgOSA4IDE2eiIgZmlsbD0iIzIyMiIvPjwvc3ZnPg==);
}


/* black asc icon */

.tablesorter-materialize thead .tablesorter-headerAsc {
  /* <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 16"><path d="M15 11 1 11 8 3z" fill="#222"/></svg> */
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgMTEgMSAxMSA4IDN6IiBmaWxsPSIjMjIyIi8+PC9zdmc+);
}


/* black desc icon */

.tablesorter-materialize thead .tablesorter-headerDesc {
  /* <svg...

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$(function() {
  $("table").tablesorter({
      theme: "materialize",
      widthFixed: true,
      // widget code contained in the jquery.tablesorter.widgets.js file
      // use the zebra stripe widget if you plan on hiding any
      // rows (filter widget)
      widgets: ["filter", "zebra"],

      widgetOptions: {
        // using the default zebra striping class name, so it actually
        // isn't included in the theme variable above; this is ONLY
        // needed for materialize theming if you are using the filter
        // widget, because rows are hidden
        zebra: ["even", "odd"],
        // reset filters button
        filter_reset: ".reset",
        // extra css class name (string or array) added to the filter
        // element (input or select); select needs a "browser-default"
        // class or it gets hidden
        filter_cssFilter: ["", "", "browser-default"]
      }
    })
    .tablesorterPager({
      // target the pager markup - see the HTML block below
      container: $(".ts-pager"),
      // target the pager page select dropdown - choose a page
      cssGoto: ".pagenum",
      output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'

    });

});