To enable this type of select, set the filter_functions option for the column to true,
filter_functions : {
// Add select menu to this column
// set the column value to true, and/or add "filter-select" class name to header
0 : true
}
or add a "filter-select" class to the column header cell (see code below).
The default option text, "Select a name", is obtained from the header data-placeholder attribute of the column header cell. And when active, it will show all table rows.
<th class="filter-select" data-placeholder="Select a name">First Name</th>
Add a "filter-match" class to only match instead of exactly match the selected value. Click on the "Match" button below to see the difference.
<th class="filter-select filter-match" data-placeholder="Select a name">First Name</th>
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 alphanumerically (new in v2.4) sorted.
To enable this type of filter, add your custom function to the filter_functions option following this example:
filter_functions : {
// Exact match only
1 : function(e, n, f, i) {
return e === f;
}
}
The example 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_searchDelay option to be a bit longer.
Also, the example only checks for an exact match (===) meaning the filter_ignoreCase option is ignored, but other comparisons can be made using regex and the insensitive "i" flag.
To enable this type of select, add your custom options within the filter_functions option.
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.
Here is an example using alphabetical comparisons (using regular expressions):
filter_functions : {
// Add these options to the select dropdown (regex example)
2 : {
"A - D" : function(e, n, f, i) { return /^[A-D]/.test(e); },
"E - H" : function(e, n, f, i) { return /^[E-H]/.test(e); },
"I - L" : function(e, n, f, i) { return /^[I-L]/.test(e); },
"M - P" : function(e, n, f, i) { return /^[M-P]/.test(e); },
"Q - T" : function(e, n, f, i) { return /^[Q-T]/.test(e); },
"U - X" : function(e, n, f, i) { return /^[U-X]/.test(e); },
"Y - Z" : function(e, n, f, i) { return /^[Y-Z]/.test(e); }
}
}
Here is an example using numerical comparisons:
filter_functions : {
// Add these options to the select dropdown (numerical comparison example)
// Note that only the normalized (n) value will contain numerical data
// If you use the exact text, you'll need to parse it (parseFloat or parseInt)
4 : {
"< $10" : function(e, n, f, i) { return n < 10; },
"$10 - $100" : function(e, n, f, i) { return n >= 10 && n <=100; },
"> $100" : function(e, n, f, i) { return n > 100; }
}
}
See the "Filter function information" section below.
The custom function must return a boolean value. If true is returned, the row will be shown if all other filters match; and if false is returned, the row will be hidden.
function(e, n, f, i) { return test; /* test should be a Boolean (true or false) */ }
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_ignoreCase option is true.
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.
Demo
false (toggle "filter-match" class on First Name column)