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.98.0/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';

/* Adjust icon size for icon-text widget */

.tablesorter-header .material-icons {
  font-size: 20px;
  position: absolute;
  right: 2px;
  top: 50%;
  margin-top: -.5em;
}


/*************
  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;
}


/* since materialize (table-striped) uses nth-child(), we just use this to add a zebra stripe color */

.tablesorter-materialize > tbody > tr.odd > td,
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
  background-color: #f9f9f9;
}

.tablesorter-materialize > tbody > tr.hover > td,
.tablesorter-materialize > tbody > tr.odd:hover > td,
.tablesorter-materialize > tbody > tr.even:hover > td,
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
  background-color: #f5f5f5;
}

.tablesorter-materialize > tbody > tr.even > td,
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.even:hover ~...

JavaScript

/* Documentation for this tablesorter FORK can be found at
 * http://mottie.github.io/tablesorter/docs/
 */
$.tablesorter.addWidget({
  id: 'material-icons',
  options: {
    icon_text: {
      asc: "keyboard_arrow_up",
      desc: "keyboard_arrow_down",
      unsorted: "format_line_spacing"
    }
  },
  format: function(table, c, wo) {
    var icon = "." + c.cssIcon;
    c.$headers.find(icon).text(wo.icon_text.unsorted);
    $.each(c.sortList, function(indx, val) {
      var dir = val[1] === 0 ? 'asc' : 'desc';
      c.$headers.eq(val[0]).find(icon).text(wo.icon_text[dir]);
    });
  }
});

$(function() {
  $("table").tablesorter({
      theme: "materialize",
      widthFixed: true,

      // add material icons to headers
      headerTemplate: "{content}{icon}",
      cssIcon: "material-icons",

      // 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", "material-icons"],

      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})'

    });

});