<li>An additional <code>data</code> parameter was added to the filter functions. It is an object which contains all data provided to the filter type functions (see <ahref="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">all the data values here</a>).</li>
<li><spanclass="label warning">*WARNING*</span> In a future update, the filter function parameters will change to clean up the code (I know, it's messy)!
<li>In <spanclass="version">v2.21.0</span>, the filter functions provide an additional parameter <code>c</code> which is the <code>table.config</code>.</li>
<li>In <spanclass="version updated">v2.17.0</span>, the <code>filter_functions</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).</li>
<li>When a default filter select is added to a column, it is now parsed from the assigned parser, then sorted using the <code>textSorter</code> setting, and falls back to an alphanumeric sort.</li>
<li>In <spanclass="version">v2.14</span>, the <code>filter_saveFilters</code> option was added (default set to <code>false</code>); this demo has it set to <code>true</code> to provide an example.</li>
<li>In <spanclass="version">v2.11</span>, the filter functions provide an additional parameter <code>$r</code> providing a jQuery object of the current row being searched by the filter.</li>
<li>For <spanclass="version">v2.10.8</span>, the Age column includes the new <code>data-value</code> set to <code><30</code> which sets the default (starting) filter value (see <ahref="index.html#widget-filter-defaultattrib">filter_defaultAttrib</a> for more details).</li>
<li>As of tablesorter <spanclass="version">v2.9</span>, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
<li>To enable this type of select, set the <code>filter_functions</code> option for the column to <code>true</code>,<preclass="prettyprint lang-javascript">filter_functions : {
}</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.<preclass="prettyprint lang-html"><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.<preclass="prettyprint lang-html"><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>The select contents are now parsed from the assigned parser, then sorted using the <ahref="index.html#textsorter"><code>textSorter</code></a> option</li>
<li>Please check out what the "filter-onlyAvail" class name does by reviewing the details below (in the "Discount" column) (<spanclass="version">v2.10.1</span>).</li>
<li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<preclass="prettyprint lang-javascript">filter_functions : {
<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><spanclass="label warning">*NOTE*</span> If using an exact match function like this, consider setting the <ahref="index.html#widget-filter-searchfiltered"><code>filter_searchFiltered</code></a> option to false. If it were set to <code>true</code>, the filter widget wouldn't know to search through the entire contents of the column if the content were only slightly different. To see this problem, search for <buttondata-filter-column="1">Evan</button> in the "Last Name" column, then add an "s" to the end to find "Evans". No results will show up, unless the search filtered option is <code>false</code>.</li>
<li>See the filter function information below for more details about the function parameters.</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>This column uses the same method as the "First Name" column with one exception, it also includes the "filter-onlyAvail" class name in the header
<li>First, filter the "First Name" column by selecting the name "Clark"</li>
<li>Now use the "Discount" filter select box, you'll notice that only the values associated with the first name of Clark are showing as options.</li>
</ul>
</li>
<li>Conversely, if you reset the filters, select "44%" in the "Discount" column, then look at the "First Name" filter selector, you'll notice that it still contains all of the original options; because the "filter-onlyAvail" class name is not included in that column's header cell.</li>
<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.
<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>
<li>The <strong>row ($r)</strong> is the current table row (jQuery object) being searched (or filtered).
<ul>
<li>This allows access to any extra information within. To access the current cell, just use <code>$r.children().eq(i)</code>.</li>
<li><spanclass="label alert">* NOTE *</span> The row object provided is <em>not</em> attached to the table, so using something like <code>.parent()</code> or <code>.closest()</code> will not work!</li>
<li>For this reason, the next parameter (<code>c</code>) was added.</li>
<li>The <strong>data</strong> parameter is the same data passed to the filter types (see <ahref="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">all the data values here</a>; added <spanclass="version">v2.21.6</span>).</li>
<buttontype="button"class="match"data-filter-column="0"data-filter-text="Denni">Toggle</button><spanid="mode"class="bright">false</span>"filter-match" class name on the "First Name" column<br>
<buttontype="button"class="search-type">Toggle</button> filter_searchFiltered : <spanid="search-type"class="bright">true</span> (if true, the search is performed on already filtered rows, with some exceptions)<br>