• These updated filter widget functions are not completely backward compatible with older versions of the filter widget. Please update both!
• Added compare & selected options:
  • These options allow the adding of a comparison operator selector to the cell (e.g. >, >=, <, <=, etc).
  • If any cellText is included, it is now wrapped in a label with a class name of "compare-select-label" and "compare-select-label#" (where "#" is the column index).
  • The selector has a class name of "compare-select" and "compare-select#" (where "#" is the column index)
  • Whichever type of input that is added to the cell is then wrapped in a div with class "compare-select-wrapper" and "compare-select-wrapper#" (where "#" is the column index).
  • These class names allow styling of an individual filter to keep elements in line, or however you wish to style it.

    <!-- rendered filter cell (first column) -->
    <td>
    	<!-- cellText -->
    	<label class="compare-select-label compare-select-label0">Rank:</label>
    	<!-- compare: [ '=', '>=', '<=' ] -->
    	<select class="compare-select compare-select0">
    		<option>=</option>
    		<option>&gt;=</option>
    		<option selected>&lt;=</option>
    	</select>
    	<!-- wrapped selector element -->
    	<div class="compare-select-wrapper compare-select-wrapper0">
    		<div class="slider slider0><!-- jQuery UI Slider gets added here --></div>
    	</div>
    	<!-- hidden input -->
    	<input class="filter tablesorter-filter" type="hidden" value="" data-column="0">
    </td>

• Filter reset now sets these filters to their default values, not an empty string.
• Updated to now properly restore saved filters.
• Added endOfDay option for jQuery UI Datepicker.
  • When true search dates will include all times from the date chosen when a comparison is made of dates "less than" the set date.
  • Example 1: if a table entry has a date of "Jan 14, 2014 11:23 AM" and the filter search is set to <= 1/14/2014, the table entry will be included in the search; the default set time would otherwise be "1/14/2014 00:00:00" and not include the entry from "11:23 AM". So, the endOfDay option sets the time to "23:59:59".
  • Example 2: if searching for one specific date, this option will now search for all times within that day. For example, searching for = 1/20/2014, and the results will include dates from 1/20/2014 00:00:00 to 1/20/2014 23:59:59.
  • When comparing dates greater than the set date, the time will be set to midnight; so this option will not be applied.
  • Example 3: in two date inputs, the endOfDay time is only applied to the "to" input; search for 1/20/2014 - 1/20/2014
  • This option is available in both the comparison (one input) and range (two inputs; "to" date input only) date pickers.

$(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
        0 : 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
          });
        }

      }
    }
  });

});

$(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
        2 : 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
          });
        }

      }
    }
  });

});

$(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
          });
        }
      }
    }
  });

});

• 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 <= 1/14/2014; 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 = 1/20/2014 to note that the day include various times.

$(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
          });
        }
      }
    }
  });

});

• 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.

• 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.

$(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
          });
        }
      }
    }
  });

});

• 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.

• If your selector isn't an input (e.g. jQuery UI Slider), then you'll need to return an input of type hidden which gets updated by the selector with the filter query for the column.

  filter_formatter : {
    0 : function($cell, indx) {
      var $input = $('<input type="hidden">').appendTo($cell);
      // add your selector code here
      return $input;
    }
  }

• If the input contains a value that doesn't match a standard filter syntax, then you'll need to return an input of type hidden with the correct format.
• This returned input element should to be attached to the $cell.
• The returned input should have a "search" event triggered upon it after being updated.

$cell.closest('table').bind('filterReset', function(){ /* update the input here */ });

$cell.closest('table').bind('filterFomatterUpdate', function(){
	var savedSearch = $cell.find('input[type=hidden]').val();
	// apply this saved search to your custom input
});

$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');

$input.val( newVal ).trigger('search', false); // no search delay