jQuery tablesorter 2.0 - Custom Filter Widget Formatter (HTML5 Elements)

# tablesorter

## Custom Filter Widget Formatter (HTML5 Elements)

### Flexible client-side table sorting

Back to documentation

### 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

Rank | Color | Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | --- | ---
1 | #ff0000 | Johnson | 25 | $5.95 | 22% | Jun 26, 2013 7:22 AM
11 | #00ff00 | Hibert | 12 | $2.99 | 5% | Aug 21, 2013 12:21 PM
12 | #0000ff | Henry | 51 | $42.29 | 18% | Oct 13, 2013 1:15 PM
51 | #00ff00 | Parker | 28 | $9.99 | 20% | Jul 6, 2013 8:14 AM
21 | #ffffff | Hood | 33 | $19.99 | 25% | Dec 10, 2012 5:14 AM
013 | #ff0000 | Kent | 18 | $15.89 | 44% | Jan 12, 2013 11:14 AM
005 | #00ff00 | Bruce | 45 | $153.19 | 44% | Jan 18, 2014 9:12 AM
10 | #000000 | Alex | 3 | $5.29 | 4% | Jan 8, 2013 5:11 PM
16 | #ff0000 | Franco | 24 | $14.19 | 14% | Jan 14, 2014 11:23 AM
66 | #000000 | Evans | 22 | $13.19 | 11% | Jan 18, 2013 9:12 AM
100 | #ffffff | Brenda | 18 | $55.20 | 15% | Feb 12, 2013 7:23 PM
55 | #000000 | Bronson | 65 | $123.00 | 32% | Jan 20, 2014 1:12 PM
9 | #000000 | Martha | 25 | $22.09 | 17% | 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 ››