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>