Tablesorter demo

All options included, as well as the uitheme widget

by Mottie

HTML

<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.blue.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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/widgets/widget-filter-formatter-select2.js"></script>
<button type="button" class="reset">Reset Search</button>
<table class="tablesorter">
  <thead>
    <tr>
      <!-- filter-match is automatically added by select2 "match" option -->
      <th>AlphaNumeric (match)</th>
      <th class="filter-onlyAvail">AlphaNumeric (exact; only available)</th>
      <th>Numeric</th>
      <th>Animals</th>
      <th>Sites</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>abc 123</td>
      <td>abc 123</td>
      <td>10</td>
      <td>Koala</td>
      <td>http://www.google.com</td>
    </tr>
    <tr>
      <td>abc 1</td>
      <td>abc 1</td>
      <td>34</td>
      <td>Ox</td>
      <td>http://www.yahoo.com</td>
    </tr>
    <tr>
      <td>abc 9</td>
      <td>abc 9</td>
      <td>10</td>
      <td>Girafee</td>
      <td>http://www.facebook.com</td>
    </tr>
    <tr>
      <td>zyx 24</td>
      <td>zyx 24</td>
      <td>67</td>
      <td>Bison</td>
      <td>http://www.whitehouse.gov/</td>
    </tr>
    <tr>
      <td>abc 11</td>
      <td>abc 11</td>
      <td>3</td>
      <td>Chimp</td>
      <td>http://www.ucla.edu/</td>
    </tr>
    <tr>
      <td>def 2</td>
      <td>def 2</td>
      <td>56</td>
      <td>Elephant</td>
      <td>http://www.wikipedia.org/</td>
    </tr>
    <tr>
      <td>abc 9</td>
      <td>abc 9</td>
      <td>75</td>
      <td>Lion</td>
      <td>http://www.nytimes.com/</td>
    </tr>
    <tr>
      <td>def 10</td>
      <td>def 10</td>
     ...

JavaScript

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

  $('.tablesorter').tablesorter({
    theme: 'blue',
    widthFixed: true,
    widgets: ['zebra', 'stickyHeaders', 'filter'],
    widgetOptions: {
      // Use the $.tablesorter.storage utility to save the most recent filters
      filter_saveFilters: true,
      // jQuery selector string of an element used to reset the filters
      filter_reset: 'button.reset',
      // add custom selector elements to the filter row
      filter_formatter: {

        // Alphanumeric (match)
        0: function($cell, indx) {
          return $.tablesorter.filterFormatter.select2($cell, indx, {
            match: true, // adds "filter-match" to header
            cellText: 'Match: ', // Cell text
            width: '85%', // adjusted width to allow for cell text
            value: ['abc', 'def'] // initial values
          });
        },

        // Alphanumeric (exact)
        1: function($cell, indx) {
          return $.tablesorter.filterFormatter.select2($cell, indx, {
            match: false // exact match only
          });
        }
      },

      // option added in v2.16.0
      filter_selectSource: {
        // Alphanumeric match (prefix only)
        // added as select2 options (you could also use select2 data option)
        0: function(table, column) {
          return ['abc', 'def', 'zyx'];
        }
      }
    }

  });

});