<!-- blue theme stylesheet -->
<link rel="stylesheet" href="../css/theme.blue.css">
<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>

<!-- tablesorter widget file - loaded after the plugin -->
<script src="../js/jquery.tablesorter.widgets.js"></script>

$(function() {

  // call the tablesorter plugin
  $("table.tablesorter").tablesorter({
    theme: 'blue',

    // hidden filter input/selects will resize the columns, so try to minimize the change
    widthFixed : true,

    // initialize zebra striping and filter widgets
    widgets: ["zebra", "filter"],

    // headers: { 5: { sorter: false, filter: false } },

    widgetOptions : {

      // If there are child rows in the table (rows with class name from "cssChildRow" option)
      // and this option is true and a match is found anywhere in the child row, then it will make that row
      // visible; default is false
      filter_childRows : false,

      // if true, a filter will be added to the top of each table column;
      // disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false"
      // if you set this to false, make sure you perform a search using the second method below
      filter_columnFilters : true,

      // css class applied to the table row containing the filters & the inputs within that row
      filter_cssFilter : 'tablesorter-filter',

      // add custom filter functions using this option
      // see the filter widget custom demo for more specifics on how to use this option
      filter_functions : null,

      // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
      // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
      filter_hideFilters : true,

      // Set this option to false to make the searches case sensitive
      filter_ignoreCase : true,

      // jQuery selector string of an element used to reset the filters
      filter_reset : 'button.reset',

      // Delay in milliseconds before the filter widget starts searching; This option prevents searching for
      // every character while typing and should make searching large tables faster.
      filter_searchDelay : 300,

      // Set this option to true to use the filter to find text from the start of the column
      // So typing in "a" will find "albert" but not "frank", both have a's; default is false
      filter_startsWith : false,

      // Filter using parsed content for ALL columns
      // be careful on using this on date columns as the date is parsed and stored as time in seconds
      filter_useParsedData : false

    }

  });

  // External search
  // buttons set up like this:
  // <button class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
  $('button.search').click(function(){
    /*** first method *** data-filter-column="1" data-filter-text="!son"
      add search value to Discount column (zero based index) input */
    var filters = $('table.tablesorter').find('input.tablesorter-filter'),
      col = $(this).data('filter-column'), // zero-based index
      txt = $(this).data('filter-text'); // text to add to filter

    filters.val(''); // clear all filters
    filters.eq(col).val(txt).trigger('search', false);

    /*** second method ***
      this method bypasses the filter inputs, so the "filter_columnFilters"
      option can be set to false (no column filters showing)
    ******/
    /*
    var columns = [];
    columns[4] = '2?%'; // or define the array this way [ '', '', '', '2?%' ]
    $('table').trigger('search', [columns]);
    */

  });

});

/* filter row */
.tablesorter-filter-row td {
  background: #eee;
  line-height: normal;
  text-align: center; /* center the input */
  -webkit-transition: line-height 0.1s ease;
  -moz-transition: line-height 0.1s ease;
  -o-transition: line-height 0.1s ease;
  transition: line-height 0.1s ease;
}
/* optional disabled input styling */
.tablesorter-filter-row .disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: not-allowed;
}

/* hidden filter row */
.tablesorter-filter-row.hideme td {
  /*** *********************************************** ***/
  /*** change this padding to modify the thickness     ***/
  /*** of the closed filter row (height = padding x 2) ***/
  padding: 2px;
  /*** *********************************************** ***/
  margin: 0;
  line-height: 0;
  cursor: pointer;
}
.tablesorter-filter-row.hideme .tablesorter-filter {
  height: 1px;
  min-height: 0;
  border: 0;
  padding: 0;
  margin: 0;
  /* don't use visibility: hidden because it disables tabbing */
  opacity: 0;
  filter: alpha(opacity=0);
}

/* filters */
.tablesorter-filter {
  width: 95%;
  height: inherit;
  margin: 4px;
  padding: 4px;
  background-color: #fff;
  border: 1px solid #bbb;
  color: #333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: height 0.1s ease;
  -moz-transition: height 0.1s ease;
  -o-transition: height 0.1s ease;
  transition: height 0.1s ease;
}

  <button class="search" data-filter-column="5" data-filter-text="2?%">Saved Search</button> (search the Discount column for "2?%")<br>
  <button class="reset">Reset Search</button> <!-- targetted by the "filter_reset" option -->

  <table class="tablesorter">
  <thead>
    <tr>
      <th data-placeholder="" class="filter-false">Rank</th>
      <th data-placeholder="Try B*{space}">First Name</th>
      <th data-placeholder="Try <d">Last Name</th>
      <th data-placeholder="Try >=33">Age</th>
      <th data-placeholder="Try <9.99">Total</th>
      <th data-placeholder="Try 2?%">Discount</th> <!-- add class="filter-false" to disable the filter in this column -->
      <th data-placeholder="Try /20[^0]\d/">Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Philip Aaron</td>
      <td>Johnson Sr Esq</td>
      <td>25</td>
      <td>$5.95</td>
      <td>22%</td>
      <td>Jun 26, 2004 7:22 AM</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Aaron</td>
      <td>Hibert</td>
      <td>12</td>
      <td>$2.99</td>
      <td>5%</td>
      <td>Aug 21, 2009 12:21 PM</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Brandon Clark</td>
      <td>Henry Jr</td>
      <td>51</td>
      <td>$42.29</td>
      <td>18%</td>
      <td>Oct 13, 2000 1:15 PM</td>
    </tr>
    <tr>
      <td>111</td>
      <td>Peter</td>
      <td>Parker</td>
      <td>28</td>
      <td>$9.99</td>
      <td>20%</td>
      <td>Jul 6, 2006 8:14 AM</td>
    </tr>
    <tr>
      <td>21</td>
      <td>John</td>
      <td>Hood</td>
      <td>33</td>
      <td>$19.99</td>
      <td>25%</td>
      <td>Dec 10, 2002 5:14 AM</td>
    </tr>
    <tr>
      <td>013</td>
      <td>Clark</td>
      <td>Kent Sr.</td>
      <td>18</td>
      <td>$15.89</td>
      <td>44%</td>
      <td>Jan 12, 2003 11:14 AM</td>
    </tr>
    <tr>
      <td>005</td>
      <td>Bruce</td>
      <td>Almighty Esq</td>
      <td>45</td>
      <td>$153.19</td>
      <td>44%</td>
      <td>Jan 18, 2021 9:12 AM</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Alex</td>
      <td>Dumass</td>
      <td>13</td>
      <td>$5.29</td>
      <td>4%</td>
      <td>Jan 8, 2012 5:11 PM</td>
    </tr>
    <tr>
      <td>16</td>
      <td>Jim</td>
      <td>Franco</td>
      <td>24</td>
      <td>$14.19</td>
      <td>14%</td>
      <td>Jan 14, 2004 11:23 AM</td>
    </tr>
    <tr>
      <td>166</td>
      <td>Bruce Lee</td>
      <td>Evans</td>
      <td>22</td>
      <td>$13.19</td>
      <td>11%</td>
      <td>Jan 18, 2007 9:12 AM</td>
    </tr>
    <tr>
      <td>100</td>
      <td>Brenda Lee</td>
      <td>McMasters</td>
      <td>18</td>
      <td>$55.20</td>
      <td>15%</td>
      <td>Feb 12, 2010 7:23 PM</td>
    </tr>
    <tr>
      <td>55</td>
      <td>Dennis</td>
      <td>Bronson</td>
      <td>65</td>
      <td>$123.00</td>
      <td>32%</td>
      <td>Jan 20, 2001 1:12 PM</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Martha</td>
      <td>delFuego</td>
      <td>25</td>
      <td>$22.09</td>
      <td>17%</td>
      <td>Jun 11, 2011 10:55 AM</td>
    </tr>
  </tbody>
</table>