Notes

jQuery UI Single Slider ("Rank" and "Age" columns)

In v2.15.0 the compare option was updated to allow adding a selector along with the input. The selected option allows choosing the default setting.
In v2.10.1 the compare option was added. This allows comparing the slider's value to the column value. The slider in the Age column is selecting values greater than or equal to itself.
A search delay was added in v2.7.11 (time set by filter_searchDelay option). It can be disabled by setting the delayed option to false.
This example shows how you can add a jQuery UI slider to filter column content.
The filter_formatter function provided in the extra "widget-filter-formatter-jui.js" file is used to add this custom control within the filter row.
Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.

Add the following code to apply a slider to filter a column:

$(function() {

  $("table").tablesorter({
    theme: 'jui',
    // 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", "uitheme"],
    widgetOptions : {
      // 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 : {

        // Rank (jQuery selector added v2.17.0)
        'th:contains("Rank")' : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
            // filterFormatter options
            cellText : 'Rank:',
            delayed: true,        // delay search (set by filter_searchDelay)
            valueToHeader: false, // add current slider value to the header cell
            exactMatch: true,     // exact (true) or match (false)
            allText: 'all',       // text shown when the slider is at the minimum value
            compare : [ '=', '>=', '<=' ], // any comparison would override the exactMatch option
            selected : 2,         // zero-based index of compare starting selected value

            // add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
            value: 100,           // starting value
            min: 0,               // minimum value
            max: 100              // maximum value
          });
        },

        // Age
        1 : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
            delayed: false,       // delay search (set by filter_searchDelay)
            valueToHeader: false, // add current slider value to the header cell
            exactMatch: false,    // exact (true) or match (false)
            allText: 'all',       // text shown when slider is at the minimum value; ignored when compare has a value
            compare: [ '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
            selected : 1,         // zero-based index of compare starting selected value

            // add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
            value: 1,             // starting value
            min: 1,               // minimum value
            max: 65               // maximum value
          });
        }

      }
    }
  });

});

The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the valueToHeader option to true to add the slider value to the header cell above the filter.
Another option named exactMatch was added to allow exact or general matching of column content.
Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the allText option.

jQuery UI Range Slider ("Total" column)

This example shows how you can add a jQuery UI range slider to filter column content.
The filter_formatter function provided in the extra "widget-filter-formatter-jui.js" file is used to add this custom control within the filter row.
Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.
The range slider is actually the same as the single slider described above, but was built to handle a range of values.

Add the following code to apply a range slider to filter a column:

$(function() {

  $("table").tablesorter({
    theme: 'jui',
    // 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", "uitheme"],
    widgetOptions : {
      // 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 : {

        // Total column (jQuery selector added v2.17.0)
        '.total' : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
            delayed: true,        // delay search (set by filter_searchDelay)
            valueToHeader: false, // add current slider value to the header cell

            // add any of the jQuery UI Slider options (for range selection) here (http://api.jqueryui.com/slider/)
            values: [1, 160],     // starting range
            min: 1,               // minimum value
            max: 160              // maximum value
          });
        }

      }
    }
  });

});

The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the valueToHeader option to true to add the slider value to the header cell above the filter.
Another option named exactMatch was added to allow exact or general matching of column content.
A search delay was added in v2.7.11 (time set by filter_searchDelay option). It can be disabled by setting the delayed option to false.

jQuery UI Spinner ("Discount" column)

In v2.15.0 the compare option was updated to allow adding a selector along with the input. The selected option allows choosing the default setting.
This example shows how you can add a jQuery UI spinner to filter column content.
The filter_formatter function provided in the extra "widget-filter-formatter-jui.js" file is used to add this custom control within the filter row.

Add the following code to apply a spinner to filter a column:

$(function() {

  $("table").tablesorter({
    theme: 'jui',
    // 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", "uitheme"],
    widgetOptions : {
      // 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 : {

        // Discount column
        3 : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
            delayed: true,    // delay search (set by filter_searchDelay)
            addToggle: false, // add a toggle switch to activate/deactive the search
            exactMatch: true, // exact (true) or match (false)
            compare : [ '', '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
            selected : 2,     // zero-based index of compare starting selected value

            // add any of the jQuery UI Spinner options here (http://api.jqueryui.com/spinner/)
            min : 0,
            max : 45,
            value: 1,
            step: 1
          });
        }
      }
    }
  });

});

This is the only jQuery UI widget that includes a toggle button. The toggle button is added by default, but if you don't want it, set the addToggle option to false. Without the toggle button, the filter is always active.
Another option named exactMatch was added to allow exact or general matching of column content.
A search delay was added in v2.7.11 (time set by filter_searchDelay option). It can be disabled by setting the delayed option to false.

jQuery UI Datepicker Comparison ("Date (one input)" column)

In v2.15.0
- The compare option was updated to allow adding a selector along with the input. The selected option allows choosing the default setting.
- A endOfDay option was added, which when a <= comparison is made, will include all times within the selected day. Try searching for ; it basically sets the time of the selected day to end at 23:59:59.
- Additionally, when endOfDay option is true and using an exact (=) comparison, all times within that selected day will be included - try searching for to note that the day include various times.
This example shows how you can add a jQuery UI Datepicker to compare to filter column content.
The filter_formatter function provided in the extra "widget-filter-formatter-jui.js" file is used to add this custom control within the filter row.
This code follows the default functionality example from the jQuery UI docs.

Add the following code to apply a datepicker comparison selector to the filter row:

$(function() {

  $("table").tablesorter({
    theme: 'jui',
    // 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", "uitheme"],
    widgetOptions : {
      // 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 : {

        // Date (one input)
        4 : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
            cellText : 'Dates', // text added before the input
            compare : [ '', '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
            selected : 3,       // zero-based index of compare starting selected value

            // add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
            // defaultDate : '1/1/2014', // default date
            changeMonth : true,
            changeYear : true
          });
        }
      }
    }
  });

});

There is one issue with this comparison script, and that is with dates that contain a time:
- Table data that contains dates with times will be parsed into values that include time.
- So if the compare option is set to =, it may not show any filtered table rows as none match that date at midnight. To fix this, either remove times from the table data, use a column parser that ignores the time, or use the Datepicker range selector and set the "from" input to the desired day and the "to" input to be the next day (at midnight).
- ~~Using a compare of <= will only show filtered dates from the selected day at midnight with earlier dates; i.e. a cell with the selected date but a time set to noon will not be visible~~. As of v2.10/8, the comparison of dates less than the selected date, now adds a time of 11:59:59 so it will include times within the selected date.

jQuery UI Datepicker Range Selector ("Date (two inputs)" column)

In v2.16.0, a filter_placeholder option was added:
- The option adds a search input placeholder and select (first option) text, but it also includes placeholder text for both the "from" and "to" inputs
- Set it as follows:
```
filter_placeholder : {
  search : '', // any default search inputs including the datepicker comparison
  from   : 'Date from...', // datepicker range "from" placeholder
  to     : 'Date to...'  // datepicker range "to" placeholder
}
```
- Note The browser must support the placeholder attribute before this text will be visible.
In v2.15.0, an endOfDay option was added, which when true and searching within one day, all times within that selected day will be included - try searching for to note that the day include various times.
This example shows how you can add a jQuery UI Datepicker range to filter column content.
The filter_formatter function provided in the extra "widget-filter-formatter-jui.js" file is used to add this custom control within the filter row.
This code follows the date range example from the jQuery UI docs.
Updated two input functions so that if the "to" input is empty, all dates greater than the "from" date are shown. If the "from" input is empty, all dates less than the "to" input date are shown (v2.10.1).

Add the following code to apply a datepicker range selector to the filter row:

$(function() {

  $("table").tablesorter({
    theme: 'jui',
    // 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", "uitheme"],
    widgetOptions : {
      // 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 : {

        // Date (two inputs)
        5 : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
            // add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
            // from : '8/1/2013', // starting date
            // to   : '1/18/2014',  // ending date
            textFrom: 'from',   // "from" label text
            textTo: 'to',       // "to" label text
            changeMonth: true,
            changeYear : true
          });
        }
      }
    }
  });

});

Note that the datepicker options are slightly different from the default datepicker options:
- Instead of using the defaultDate option of the datepicker widget, it has a from and to option to fullfill that purpose.
- The options added to this function will be applied to both the from and to datepicker inputs.
- As of v2.10.8, the comparison of dates less than the selected "to" date, now adds a time of 11:59:59 so it will include times within the selected dates.

Custom Filter Formatter Function Information

If you want to write your own custom filter formatter function, there are certain requirements that should be met:

Demo

Select theme

Rank	Age	Total (range)	Discount	Date (one input)	Date (two inputs; range)
Rank:				Dates	fromto
1	25	$5.95	22%	Jun 26, 2013 7:22 AM	Jun 26, 2013 7:22 AM
11	12	$82.99	5%	Aug 21, 2013 12:21 PM	Aug 21, 2013 12:21 PM
12	51	$99.29	18%	Oct 13, 2013 1:15 PM	Oct 13, 2013 1:15 PM
51	28	$9.99	20%	Jul 6, 2013 8:14 AM	Jul 6, 2013 8:14 AM
21	33	$19.99	25%	Dec 10, 2012 5:14 AM	Dec 10, 2012 5:14 AM
013	18	$65.89	45%	Jan 12, 2013 11:14 AM	Jan 12, 2013 11:14 AM
005	45	$153.19	45%	Jan 18, 2014 9:12 AM	Jan 18, 2014 9:12 AM
10	3	$5.29	4%	Jan 8, 2013 5:11 PM	Jan 8, 2013 5:11 PM
16	24	$14.19	14%	Jan 14, 2014 11:23 AM	Jan 14, 2014 11:23 AM
66	22	$13.19	11%	Jan 18, 2013 9:12 AM	Jan 18, 2013 9:12 AM
100	18	$55.20	15%	Feb 12, 2013 7:23 PM	Feb 12, 2013 7:23 PM
55	65	$123.00	32%	Jan 20, 2014 1:12 PM	Jan 20, 2014 1:12 PM
9	25	$22.09	17%	Jun 11, 2013 10:55 AM	Jun 11, 2013 10:55 AM
13	12	$19.99	18%	Jan 20, 2014 7:45 PM	Jan 20, 2014 7:45 PM
73	58	$129.19	39%	Jan 20, 2014 10:11 AM	Jan 20, 2014 10:11 AM

Rank	Age	Total (range)	Discount	Date (one input)	Date (two inputs; range)
Rank:				Dates	fromto

Page Header

<!-- jQuery UI for range slider -->
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>

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

<!-- filter formatter code -->
<link rel="stylesheet" href="../css/filter.formatter.css">
<script src="../js/widgets/widget-filter-formatter-jui.js"></script>

CSS

/* css needed to get compare selector & slider in-line */
.compare-select-wrapper { min-width: 60%; float: right; }

Javascript

$(function() {

  // call the tablesorter plugin
  $("table").tablesorter({
    theme : 'jui',
    headerTemplate : '{content}{icon}',
    // 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", "stickyHeaders", "uitheme"],
    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 : {

        // Rank (jQuery selector added v2.17.0)
        'th:contains("Rank")' : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
            delayed : true,
            valueToHeader : false,
            cellText : 'Rank:',
            compare : [ '=', '>=', '<=' ],
            selected : 2, // zero-based index of compare starting selected value
            // jQuery UI slider options
            value : 100,
            min : 0,
            max : 100
          });
        },

        // Age
        1 : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
            delayed : false,
            valueToHeader : false,
            exactMatch : false,
            allText : 'all', // this is ignored when compare is not empty
            compare : [ '=', '>=', '<=' ],
            selected : 1,
            // jQuery UI slider options
            value : 1,
            min : 1,
            max : 65
          });
        },

        // Total (jQuery selector added v2.17.0)
        '.total' : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
            delayed : false,
            valueToHeader : false,
            // jQuery UI slider options
            values : [1, 160],
            min : 1,
            max : 160
          });
        },

        // Discount
        3 : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
            delayed : true,
            addToggle : false,
            exactMatch : true,
            compare : [ '', '=', '>=', '<=' ],
            selected : 2,
            // jQuery UI spinner options
            min : 0,
            max : 45,
            value : 1,
            step : 1
          });
        },

        // Date (one input)
        4 : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
            cellText : 'Dates', // text added before the input
            compare : [ '', '=', '>=', '<=' ],
            selected : 3,
            // jQuery UI datepicker options
            // defaultDate : '1/1/2014', // default date
            changeMonth : true,
            changeYear : true

          });
        },

        // Date (two inputs)
        5 : function($cell, indx) {
          return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
            // from : '08/01/2013', // default from date
            // to   : '1/18/2014',  // default to date
            changeMonth : true,
            changeYear : true
          });
        }
      },

      // added v2.16
      filter_placeholder : {
        from : 'From...',
        to   : 'To...'
      }
    }
  });

});

HTML

<table class="tablesorter">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Age</th>
      <th class="total">Total (range)</th>
      <th>Discount</th>
      <th data-placeholder="Try 1/18/2013">Date (one input)</th>
      <th>Date (two inputs; range)</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td><td>Jun 26, 2013 7:22 AM</td></tr>
    <tr><td>11</td><td>12</td><td>$82.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td><td>Aug 21, 2013 12:21 PM</td></tr>
    <tr><td>12</td><td>51</td><td>$99.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td><td>Oct 13, 2013 1:15 PM</td></tr>
    <tr><td>51</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td><td>Jul 6, 2013 8:14 AM</td></tr>
    <tr><td>21</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td><td>Dec 10, 2012 5:14 AM</td></tr>
    <tr><td>013</td><td>18</td><td>$65.89</td><td>45%</td><td>Jan 12, 2013 11:14 AM</td><td>Jan 12, 2013 11:14 AM</td></tr>
    <tr><td>005</td><td>45</td><td>$153.19</td><td>45%</td><td>Jan 18, 2014 9:12 AM</td><td>Jan 18, 2014 9:12 AM</td></tr>
    <tr><td>10</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td><td>Jan 8, 2013 5:11 PM</td></tr>
    <tr><td>16</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td><td>Jan 14, 2014 11:23 AM</td></tr>
    <tr><td>66</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td><td>Jan 18, 2013 9:12 AM</td></tr>
    <tr><td>100</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td><td>Feb 12, 2013 7:23 PM</td></tr>
    <tr><td>55</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td><td>Jan 20, 2014 1:12 PM</td></tr>
    <tr><td>9</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td><td>Jun 11, 2013 10:55 AM</td></tr>
    <tr><td>13</td><td>12</td><td>$19.99</td><td>18%</td><td>Jan 20, 2014 7:45 PM</td><td>Jan 20, 2014 7:45 PM</td></tr>
    <tr><td>73</td><td>58</td><td>$129.19</td><td>39%</td><td>Jan 20, 2014 10:11 AM</td><td>Jan 20, 2014 10:11 AM</td></tr>
  </tbody>
</table>

Next up: jQuery custom filter widget formatter (HTML5 Elements) ››

tablesorter

Custom Filter Widget Formatter (jQuery UI widgets)

Flexible client-side table sorting