jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Search Type (example 2)

# tablesorter

## Custom Filter Widget Search Type (example 2)

### Flexible client-side table sorting

Back to documentation

NOTE!

- In v2.21.0
  - The "insideRange" function was updated to use the column parser and moved into a separate file "widget-filter-type-insideRange.js"
  - This change would allow the sorting of dates, if using it along with one of the date-range parsers (added v2.21.0).
- This is another example of how to add a custom filter search type - see this page for details on how to add your own.
- This "insideRange" search type does the following:
  - This search type was not included with the other built-in search types as it might be a little slower than the other search types because it has a bit more calculation to do than the others.
  - It looks for a dash surrounded by spaces (`-` ) within the filter before activating.
  - So if you look for just
    in the "Delivery" column, the exact match of 4 will still be included.
  - Test out some more examples:
    - Try
      or
      in the Delivery column
    - in the "Price Range" column.
    - in the "Date Range" column; this column is processed using the "date-range-mdy" parser (added v2.21.0).
- Entering a range (e.g.
  will switch the query to the range search type which will only look at the first number of the range within each cell.

# Demo

Filters:

Rank | Name | Delivery (days) | Price Range | Date Range
--- | --- | --- | --- | ---
1 | Widget | 2 - 10 | $5.95 - $13.20 | 04/28/2014 - 07/13/2014
11 | Doodad | 1 - 4 | $2.99 - $8.40 | 04/28/2014 - 05/13/2014
12 | Whatchamacallit | 3 - 7 | $4.29 - $15.99 | 7/15/2014
15 | Thingy | 5 - 6 | $9.99 - $13.20 | 07/12/2014 - 07/23/2014
21 | Cube | 2 - 7 | $6.99 - $14.99 | 05/22/2014 - 05/23/2014
13 | It | 5 - 12 | $15.89 - $18.22 | 8/12/2014 - 7/10/2014
5 | Fred | 20 - 30 | $13.19 - $15.54 | 6/12/2014 - 6/14/2014
10 | FuBar | 4 | $5.50 | 6/13/2014 - 6/22/2014
16 | Otto | 2 - 4 | $6.30 - $14.19 | 5/10/2014 - 5/20/2014
21 | Betsy | 7 | $5.67 - $8.25 | 6/2/2014 - 6/13/2014
18 | Clyde | 5 - 10 | $11.20 - $15.45 | 6/13/2014
7 | Brick | 5 - 7 | $12.00 - $14.30 | 7/2/2014 - 7/25/2014
9 | Gadget | 10 - 20 | $7.09 - $13.20 | 5/23/2014 - 6/12/2014

# Page Head

    <!-- jQuery -->
    <script src="js/jquery-latest.min.js"></script>

    <!-- tablesorter -->
    <link rel="stylesheet" href="../css/theme.blue.css">
    <script src="../js/jquery.tablesorter.js"></script>
    <script src="../js/jquery.tablesorter.widgets.js"></script>
    <!-- inside range filter type -->
    <script src="../js/widgets/widget-filter-type-insideRange.js"></script>
    <!-- parse date ranges -->
    <script src="../js/parsers/parser-date-range.js"></script>

# Javascript

Next up: jQuery custom filter widget formatter (jQuery UI widgets) ››