+ NOTE!
+ Custom filter widget option filter_functions was added in version 2.3.6:
+
-
+
- Default Select - See the "First Name" column below.
+
-
+
- To enable this type of select, set the
filter_functionsoption for the column totrue, and/or add a "filter-select" class to the column header cell.
+ - The default option text, "Select a name", is obtained from the header
data-placeholderattribute of the column header cell. And when active, it will show all table rows.
+ - The select is populated by the column text contents with repeated content combined (i.e. There are three "Aaron"'s in the first column, but only one in the dropdown. +
- Select options are automatically sorted. +
+ - To enable this type of select, set the
- Custom Select - See the "Total" column.
+
-
+
- To enable this type of select, add your custom options within the
filter_functionsoption.
+ - Each option is set as a "key:value" pair where the "key" is the actual text of the option and the "value" is the function associated with the option. See the example below. +
- See the filter function information below. +
+ - To enable this type of select, add your custom options within the
- Custom Filter Function - See the "Last Name" column.
+
-
+
- To enable this type of filter, add your custom function to the
filter_functionsoption following the example below.
+ - The example below shows you how to show only exact matches. The problem with this is that you can't see the matches while typing unless you set the
filter_searchDelayoption to be a bit longer.
+ - Also, the example only checks for an exact match (
===) meaning thefilter_ignoreCaseoption is ignored, but other comparisons can be made using regex and the insensitive "i" flag.
+ - See the filter function information below. +
+
+ - To enable this type of filter, add your custom function to the
- Filter function information:
+
-
+
- The custom function must return a boolean value. If
trueis returned, the row will be shown if all other filters match; and iffalseis returned, the row will be hidden.
+ - The exact text (e) of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons. +
- Normalized table cell data (n) is the next varibale passed to the function.
+
-
+
- This data has been parsed by the assigned column parser, so make sure the same type of data is being compared as parsed data may not be what you expect. +
- Normalized numerical values within the table will be of numeric type and not of string type, as the sorter needs to use mathematical comparisons while sorting. +
- The data will be in lower-case if the
filter_ignoreCaseoption istrue.
+ - Dates like in the last column of the table below will store the time in seconds since 1970 (using javascript's .getTime() function). +
- The percentage column will only store the number and not percentage sign. +
+ - The filter input value (f) is the exact text entered by the user. If numerical, it will need to be parsed using parseFloat() or parseInt() to allow for making comparisons. +
- The column index (i) might be useful for obtaining more information from header, or something. +
+ - The custom function must return a boolean value. If
Demo
+ filter_startsWith : false (if true, search from beginning of cell content only)+ filter_ignoreCase : true (if false, the search will be case sensitive) + +
| First Name | +Last Name | +City | +Age | +Total | +Discount | +Date | +
|---|---|---|---|---|---|---|
| Aaron | +Johnson Sr | +Atlanta | +35 | +$5.95 | +22% | +Jun 26, 2004 7:22 AM | +
| Aaron | +Johnson | +Yuma | +12 | +$2.99 | +5% | +Aug 21, 2009 12:21 PM | +
| Clark | +Henry Jr | +Tampa | +51 | +$42.29 | +18% | +Oct 13, 2000 1:15 PM | +
| Peter | +Henry | +New York | +28 | +$9.99 | +20% | +Jul 6, 2006 8:14 AM | +
| John | +Hood | +Boston | +33 | +$19.99 | +25% | +Dec 10, 2002 5:14 AM | +
| Clark | +Kent Sr | +Los Angeles | +18 | +$15.89 | +44% | +Jan 12, 2003 11:14 AM | +
| John | +Kent Esq | +Seattle | +45 | +$153.19 | +44% | +Jan 18, 2021 9:12 AM | +
| Peter | +Johns | +Milwaukee | +13 | +$5.29 | +4% | +Jan 8, 2012 5:11 PM | +
| Aaron | +Evan | +Chicago | +24 | +$14.19 | +14% | +Jan 14, 2004 11:23 AM | +
| Bruce | +Evans | +Upland | +22 | +$13.19 | +11% | +Jan 18, 2007 9:12 AM | +
| Clark | +McMasters | +Pheonix | +18 | +$55.20 | +15% | +Feb 12, 2010 7:23 PM | +
| Dennis | +Masters | +Indianapolis | +65 | +$123.00 | +32% | +Jan 20, 2001 1:12 PM | +
| John | +Hood | +Fort Worth | +25 | +$22.09 | +17% | +Jun 11, 2011 10:55 AM | +
Javascript
+
+
+
+
+ HTML
+
+
+
+
+
+
+