Notes

  • In v2.17.0, the filter_formatter column can also be referenced by using a jQuery selector (e.g. class name or ID).
  • As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.
  • At this time, these widgets do not work with the sticky header widget.
  • This page shows you how to add a few default HTML5 elements to interact with the filter widget.
  • If the HTML5 elements are not supported by your browser, you'll just see an input.
  • Custom filter widget option filter_formatter was added in version 2.7.7.
  • jQuery v1.4.3+ required.

HTML Range ("Rank" and "Total" 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.
  • This example shows how you can add an HTML5 range input slider to filter column content.
  • The filter_formatter function provided in the extra "widget-filter-formatter-html5.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 an HTML5 range slider to the filter row:
    $(function() {
    
      $("table").tablesorter({
        theme: 'blue',
        // initialize zebra striping and filter widgets
        widgets: ["zebra", "filter"],
        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.html5Range( $cell, indx, {
                value: 0,
                min: 0,
                max: 100,
                delayed: true,
                valueToHeader: true,
                compare : [ '=', '>=', '<=' ],
                selected: 1
              });
            },
    
            // Total
            4 : function($cell, indx) {
              return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
                value: 0,
                min: 0,
                max: 150,
                delayed: true,
                valueToHeader: true,
                compare : '>='
              });
            }
    
          }
        }
      });
    
    });
  • By default, this code has the valueToHeader option set to true to add the slider value to the header cell above the filter.
  • The tooltip above the slider is NOT added in this example because the slider handle is not a separate element. But if you are interested, you can use this code by Chris Coyier to animate a range slider bubble.
  • 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.
  • A search delay option was added in v2.7.11 (time set by filter_searchDelay option). It can be disabled by setting the delayed option to false.

HTML5 color input ("Color" column)

  • This example shows how you can add an HTML5 color input to filter column content.
  • The filter_formatter function is used to add a custom control within the filter row, but a hidden input is still required to store the filter value.
  • Add the following code to apply a color input to the filter row:
    $(function() {
    
      $("table").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"],
        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 : {
    
            // Color
            1 : function($cell, indx) {
              return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
                value: '#000000',
                addToggle: true,
                exactMatch: true,
                valueToHeader: false
              });
            }
    
          }
        }
      });
    
    });
  • This color selector will only output the color as a hex value with a hash followed by six characters (#000000).
  • By default, this code has the valueToHeader option set to false. The currently selected color is added to a span within the cell by default.
  • Another option named exactMatch was added to allow exact or general matching of column content, in case you have multiple colors in one cell.
  • This selector 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.

HTML5 Number Selector ("Age" and "Discount" 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.
  • This example shows how you can add an HTML5 number spinner to the filter column content.
  • The filter_formatter function provided in the extra "widget-filter-formatter-html5.js" file is used to add this custom control within the filter row.
  • Add the following code to apply an HTML spinner to filter a column:
    $(function() {
    
      $("table").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"],
        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 : {
    
            // Age
            3: function($cell, indx) {
              return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
                value: 1,
                min: 1,
                max: 65,
                delayed: true,
                addToggle: true,
                exactMatch: true,
                compare: ''
              });
            },
    
            // Discount
            5: function($cell, indx) {
              return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
                value: 1,
                min: 1,
                max: 44,
                delayed: true,
                addToggle: false,
                compare: [ '<=', '=', '>=' ],
                selected: 2
              });
            }
    
          }
        }
      });
    
    });
  • This is spinner 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 option was added in v2.7.11 (time set by filter_searchDelay option). It can be disabled by setting the delayed option to false.

Demo

RankColorNameAgeTotalDiscountDate
1#ff0000Johnson25$5.9522%Jun 26, 2013 7:22 AM
11#00ff00Hibert12$2.995%Aug 21, 2013 12:21 PM
12#0000ffHenry51$42.2918%Oct 13, 2013 1:15 PM
51#00ff00Parker28$9.9920%Jul 6, 2013 8:14 AM
21#ffffffHood33$19.9925%Dec 10, 2012 5:14 AM
013#ff0000Kent18$15.8944%Jan 12, 2013 11:14 AM
005#00ff00Bruce45$153.1944%Jan 18, 2014 9:12 AM
10#000000Alex3$5.294%Jan 8, 2013 5:11 PM
16#ff0000Franco24$14.1914%Jan 14, 2014 11:23 AM
66#000000Evans22$13.1911%Jan 18, 2013 9:12 AM
100#ffffffBrenda18$55.2015%Feb 12, 2013 7:23 PM
55#000000Bronson65$123.0032%Jan 20, 2014 1:12 PM
9#000000Martha25$22.0917%Jun 11, 2013 10:55 AM

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-html5.js"></script>

Javascript


	

HTML


	

Next up: UITheme widget - jQuery UI theme ››