<li><spanclass="label warning">Notice!</span> In version <spanclass="version">v2.17.8</span>, some drastic changes were made to the way variables are passed to the filters. Please check out the "How to add Custom Filter types" section below.</li>
<li>This demo was added in <spanclass="version">v2.17.5</span>, but modification using these instructions works for v2.13.3+; when the filter widget was restructured to allow the adding of custom filter search types.</li>
<li>In this demo, two additional search types have been added as an example
<ul>
<li>Start a search from beginning of the content using the <code>^</code> designator.</li>
<li>Search for a specific ending in the content using the <code>$</code> designator.</li>
</ul>
</li>
<li>Please review the following sections for more details.</li>
<li>The first step is to decide what you want your filter to do.</li>
<li>Should it look for a symbol at the beginning, middle or end of the filter?</li>
<li>Does the designator need spaces around it (e.g. " and " or " or ") to prevent problems? You wouldn't be able to find the country of "Andorra" if the "and" or "or" designators didn't require spaces.</li>
<li>Make sure to name your filter so that it doesn't interfere with already existing ones, unless your filter is meant to replace an existing one. See the "Built-in Filters" section for a full list of filter function names.</li>
<li>The following arguments are passed to the filter function within the <code>data</code> parameter (changed in <spanclass="version updated">v2.17.8</span>):
<li><code>data.filter</code> - The exact text from the filter input (e.g. <code>^h</code>).</li>
<li><code>data.iFilter</code> - The text from the filter in all lower case for case insensitive searches.</li>
<li><code>data.exact</code> - The exact (or parsed) text from the current table cell, or the entire row if <code>data.anyMatch</code> is <code>true</code>; the parsed text is passed when the column has a <code>"filter-parsed"</code> class name set.</li>
<li><code>data.iExact</code> - The exact (or parsed) text in all lower case for case insensitive searches.<br><br></li>
<li><code>data.index</code> - The current column index (zero-based) being filtered. When performing an "any match", this index is equal to <code>config.columns</code> which is the last column of the table plus one.</li>
<li><code>data.cache</code> - The parsed text from the current table cell, or the entire row if <code>data.anyMatch</code> is <code>true</code>. This value will be in all lower case if <code>config.ignoreCase</code> is <code>true</code>.<br><br></li>
<li><code>data.anyMatch</code> - This is a boolean value indicating when the <code>data.exact</code> and <code>data.iExact</code> parameters contain data from the entire row instead of one cell. This value will always be <code>false</code> if the table does not include an associated any match filter.<br><br></li>
<li><code>data.rowArray</code> - An array of the exact text from each table cell.</li>
<li><code>data.cacheArray</code> - An array of parsed text from each table cell.</li>
<li><code>data.childRowText</code> - contains all text from any associated child rows.</li>
<li><code>data.parsed</code> - An array of boolean flags that indicate if the column data should obtained from parsed values, or not; obtained from <code>filter_useParsedData</code> setting or <code>filter-parsed</code> classes on the header cells.</li>
<h3><ahref="#">How to remove filter types</a></h3>
<div>
<ul>
<li>If one of the built-in search types is interfering or bothersome to your users, then you can remove it using the following command (using fuzzy search as an example):
<preclass="prettyprint lang-js">$(function(){
// Remove fuzzy search
delete $.tablesorter.filter.types.fuzzy;
$('table').tablesorter({
theme: 'blue',
widgets: ['filter']
});
});</pre></li>
<li>The full list of built-in filter type functions can be found in the "Built-in Filters" section.</li>
</ul>
</div>
<h3><ahref="#">Localization</a></h3>
<div>
You can change the language of the searches used within the filter widget. This only applies to the "and", "or" and "to" (range) searches. For example, to change the localization to French, do the following:
<preclass="prettyprint lang-js">// add French support
$.extend($.tablesorter.language, {
to : 'à',
or : 'ou',
and : 'et'
});</pre>This results in searches that can be performed as follows:
<ul>
<li>"and" search: <code>Pierre et Franc</code> or <code>Pierre && Franc</code>.</li>
<li>"or" search: <code>Marie ou Claudette</code> or <code>Marie|Claudette</code></li>
<li>"to" search: <code>10 à 20</code> or <code>10 - 20</code></li>
</ul>
<spanclass="label label-info">Note</span> the symbolic searches never changed (<code> && </code>, <code>|</code> and <code> - </code>)
<br>
<spanclass="label label-info">Important</span> Even though the language settings don't include spaces, the user is still required to enter spaces in the filter to perform these searches, e.g. <code>1 à 10</code> (shows rows with numbers between 1 and 10).
<hr>
If you want to support multiple languages, separate the language variables with a vertical bar (<code>|</code>, <kbd>Shift</kbd> + <kbd>\</kbd>):
<preclass="prettyprint lang-js">// add French & Spanish support
$.extend($.tablesorter.language, {
to : 'à|a',
or : 'ou|o',
and : 'et|y'
});</pre></div>
</div>
<h1>Demo</h1>
<divid="demo"><buttontype="button"data-filter-column="1">^h</button> (beginning of word)<br>
<buttontype="button"data-filter-column="1">s$</button> (end of word)<br>