<li>To enable this type of select, set the <code>filter_functions</code> option for the column to <code>true</code>,<pre>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
}</pre>or add a "filter-select" class to the column header cell (see code below).</li>
<li>The default option text, "Select a name", is obtained from the header <code>data-placeholder</code> attribute of the column header cell. And when active, it will show all table rows.<pre><th class="filter-select" data-placeholder="Select a name">First Name</th></pre></li>
<li>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.<pre><th class="filter-select filter-match" data-placeholder="Select a name">First Name</th></pre></li>
<li>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.</li>
<li>Select options are automatically alphanumerically (new in v2.4) sorted.</li>
<li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<pre>filter_functions : {
// Exact match only
1 : function(e, n, f, i) {
return e === f;
}
}</pre></li>
<li>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 <code>filter_searchDelay</code> option to be a bit longer.</li>
<li>Also, the example only checks for an exact match (<code>===</code>) meaning the <code>filter_ignoreCase</code> option is ignored, but other comparisons can be made using regex and the insensitive "i" flag.</li>
<li>See the filter function information below.</li>
</ul>
</div>
<h3><ahref="#"><strong>Custom Select</strong> ("City" or "Total" column)</a></h3>
<div>
<ul>
<li>To enable this type of select, add your custom options within the <code>filter_functions</code> option.</li>
<li>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.</li>
<li>Here is an example using alphabetical comparisons (using regular expressions):<pre>filter_functions : {
// Add these options to the select dropdown (regex example)
2 : {
"A - D" : function(e, n, f, i) { return /^[A-D]/.test(e); },
"Y - Z" : function(e, n, f, i) { return /^[Y-Z]/.test(e); }
}
}</pre></li>
<li>Here is an example using numerical comparisons:<pre>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; }
}
}</pre></li>
<li>See the "Filter function information" section below.</li>
</ul>
</div>
<h3><ahref="#"><strong>Filter function information</strong></a></h3>
<div>
<ul>
<li>The custom function must return a boolean value. If <code>true</code> is returned, the row will be shown if all other filters match; and if <code>false</code> is returned, the row will be hidden.<pre>function(e, n, f, i) { return test; /* test should be a Boolean (true or false) */ }</pre></li>
<li>The <strong>exact text (e)</strong> of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons.</li>
<li><strong>Normalized table cell data (n)</strong> is the next varibale passed to the function.
<ul>
<li>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.</li>
<li>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.</li>
<li>The data will be in lower-case if the <code>filter_ignoreCase</code> option is <code>true</code>.</li>
<li>Dates like in the last column of the table below will store the time in seconds since 1970 (using javascript's .getTime() function).</li>
<li>The percentage column will only store the number and not percentage sign.</li>
</ul>
</li>
<li>The <strong>filter input value (f)</strong> 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.</li>
<li>The <strong>column index (i)</strong> might be useful for obtaining more information from header, or something.</li>
<buttonclass="match"data-filter-column="0"data-filter-text="Denni">Match</button><spanid="mode">false</span> (toggle "filter-match" class on First Name column)<br>
