jQuery tablesorter 2.0 - Filter Widget External Inputs

# tablesorter

## Filter Widget External Inputs

### Flexible client-side table sorting

Back to documentation

### Notes

- As of v2.18.0,
  - An external input `data-column` can now target multiple columns:
    - When designating a column for an external input, you can now set multiple columns and/or a range of columns (e.g. `data-column="0-2,4,6-7"`.
    - This type of search acts essentially the same as when the column is set to `"all"` in that "range", "notMatch" and "operators" searches are ignored.
    - The last search performed using either multiple columns or "all" columns will override all other queries; meaning the other inputs won't clear or update (e.g. performing a search for "foo" in an "all" column search input will override any previous searchs, and the input with a `data-column="0-2,4,6-7"` will not change its value) - this might be confusing to the user if multiple inputs are visible on the page (placeholder text won't help).
    - The selector in the demo below has two additional options: "Columns 0,3" and "Columns 1-2"; as you can see, switching the column to search between "all", "0,3" and "1-2" does not change the query.
- As of v2.15,
  - A new filter widget `filter_external` option has been added that essentially does the same thing as the `$.tablesorter.bindSearch` function.
  - Use either to bind external search inputs.
  - To change an input from searching one column (or all columns) to search any other column, call the `$.tablesorter.bindSearch` function to update the external inputs, even if the inputs are set using the `filter_external` option. Pass an additional `false` flag as the last parameter to force the inputs to update.

        $.tablesorter.bindSearch( $('table'), $('.search'), false );

  - This demo shows how to use multiple external search filters to filter the table, and how to make one input dynamically change to filter any or all columns.
- The `$.tablesorter.filter.bindSearch` function allows binding multiple external search filters
- The advantage of using this function over your own is:
  - Inputs behave the same as internal filters; searches adhere to the `filter_liveSearch` and `filter_searchDelay` options.
  - When pressing the `Esc` key, the filter resets.
- Include a `data-column="#"` attribute to specify to which column the search should apply; or `data-column="all"` to search all columns.

# Demo

Rank | First Name | Last Name | Age | Total | Discount | Date
--- | --- | --- | --- | --- | --- | ---
1 | Philip Aaron | Johnson Sr Esq | 25 | $5.95 | 22% | Jun 26, 2004 7:22 AM
11 | Aaron | Hibert | 12 | $2.99 | 5% | Aug 21, 2009 12:21 PM
12 | Brandon Clark | Henry Jr | 51 | $42.29 | 18% | Oct 13, 2000 1:15 PM
111 | Peter | Parker | 28 | $9.99 | 20% | Jul 6, 2006 8:14 AM
21 | John | Hood | 33 | $19.99 | 25% | Dec 10, 2002 5:14 AM
013 | Clark | Kent Sr. | 18 | $15.89 | 44% | Jan 12, 2003 11:14 AM
005 | Bruce | Almighty Esq | 45 | $153.19 | 44% | Jan 18, 2021 9:12 AM
10 | Alex | Dumass | 13 | $5.29 | 4% | Jan 8, 2012 5:11 PM
16 | Jim | Franco | 24 | $14.19 | 14% | Jan 14, 2004 11:23 AM
166 | Bruce Lee | Evans | 22 | $13.19 | 11% | Jan 18, 2007 9:12 AM
100 | Brenda Lee | McMasters | 18 | $55.20 | 15% | Feb 12, 2010 7:23 PM
55 | Dennis | Bronson | 65 | $123.00 | 32% | Jan 20, 2001 1:12 PM
9 | Martha | delFuego | 25 | $22.09 | 17% | Jun 11, 2011 10:55 AM

# Javascript

# HTML

Next up: jQuery custom filter widget ››