library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-10-08 13:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added filter_anyMatch option

Browse Source
This commit is contained in:
Mottie 2013-11-09 13:52:52 -06:00
parent 640057842d
commit 016b737cc1
5 changed files with 195 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
README.md
View File

@ -44,6 +44,41 @@ tablesorter can successfully parse and sort many types of data including linked
View the [complete listing here](https://github.com/Mottie/tablesorter/wiki/Change).
#### <a name="v2.13.3">Version 2.13.3</a> (11/9/2013)
* Pager (plugin/widget)
* Fixed initial filter settings when using pager ajax. Fixes [issue #388](https://github.com/Mottie/tablesorter/issues/388).
* Fixed ajax pager not recognizing column sorting. Fixes [issue #408](https://github.com/Mottie/tablesorter/issues/408).
* The core plugin now remove rows from table when using pager ajax. Fixes [issue #411](https://github.com/Mottie/tablesorter/issues/411).
* Filter widget
* Renamed all variables &amp; restructured the entire widget.
* Added better integration with the pager plugin/widget to minimize ajax server calls by getting default filter settings. Fixes [issue #388](https://github.com/Mottie/tablesorter/issues/388).
* Fixed filter formatter HTML5 spinner to properly find exact matches.
* Added a new fuzzy search parameter
* Fuzzy searches match sequential characters, similar to how Sublime Text searches work
* Start the search with a tilde `~` followed by any sequential characters to match.
* Examples: `~bee` will match both "Bruce Lee" and "Brenda Lee", `~bcd` will find "Brandon Clark" and `~piano` will find "Philip Aaron Wong"
* Added `filter_anyMatch`
* Set this option to `true` when using an external search filter.
* Setting this option should work properly with or without the column filters. The only issue you would have is if you triggered a search on the table using an array with undefined or null array values.
* Some limitations are applied when using any match. Search operators, range queries and not-matches are not allowed.
* See [the demo](http://mottie.github.io/tablesorter/docs/example-widget-filter-any-match.html) for examples &amp; more details.
* Thanks to [@prainho](https://github.com/prainho) for the suggestion, code and feedback in [issue #405](https://github.com/Mottie/tablesorter/issues/405)!
* Modified the `bindSearch` function to allow using it on external filters:
* Use as follows: `$.tablesorter.filter.bindSearch( $('table'), $('.search') );`
* Binding the search input using this method allows the search to use `filter_liveSearch`, delayed searching and pressing escape to clear the search.
* See the [filter any match demo](http://mottie.github.io/tablesorter/docs/example-widget-filter-any-match.html) for example usage.
* UITheme widget
* Added caption styling
* Updated css for jQuery UI theme and Bootstrap theme.
* Theme, demo &amp; doc updates
* Added jQuery UI theme switcher to [jQuery UI theme demo](http://mottie.github.io/tablesorter/docs/example-widget-ui-theme.html) &amp; [jQuery UI filter formatter demo](http://mottie.github.io/tablesorter/docs/example-widget-filter-formatter-1.html).
* Added ignore articles parser to [saveSort widget demo](http://mottie.github.io/tablesorter/docs/example-widget-savesort.html).
* Updated history of changes made to `cssAsc`, `cssDesc` &amp; `cssHeader` on the main documentation page. See [issue #407](https://github.com/Mottie/tablesorter/issues/407).
#### <a name="v2.13.2">Version 2.13.2</a> (11/2/2013)
* Updated pager &amp; filter widget to work when the pager `countChildRows` option is `true`:

62
docs/example-widget-filter-one-input.html → docs/example-widget-filter-any-match.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget</title>
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget Any Match</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
@ -22,35 +22,31 @@
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
var $table = $('table').tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
// headers: { 5: { sorter: false, filter: false } },
widgetOptions : {
// if true overrides default find rows behaviours and if any column matches query it returns that row
filter_anyMatch : true,
filter_columnFilters: false,
filter_reset: '.reset'
}
});
$(".search").keyup(function (e) {
// Target the $('.search') input using built in functioning
// this binds to the search using "search" and "keyup"
// Allows using filter_liveSearch or delayed search &
// pressing escape to cancel the search
$.tablesorter.filter.bindSearch( $table, $('.search') );
// Basic search binding, alternate to the above
// bind to search - pressing enter and clicking on "x" to clear (Webkit)
// keyup allows dynamic searching
/*
$(".search").bind('search keyup', function (e) {
$('table').trigger('search', [ [this.value] ]);
});
*/
});</script>
@ -67,13 +63,33 @@
<p class="tip">
<em>NOTE!</em>
<ul>
<li>This is a demo of the <code>filter_anyMatch</code> option.</li>
<li>This method has some severe limitations in that it does not support all of the per column search features!
<li>This is a demo of the <code>filter_anyMatch</code> option (<span class="version">v2.13.3</span>).</li>
<li>This method has limitations in that it does not support all of the per column search features! So, at this time, the following types of queries are not allowed as the results will cause confusion:
<ul>
<li></li>
<li>Search operators - A search for values equal, greater or less than values (<code>&gt &gt= &lt;= &lt;</code>) is not allowed because tables that contain both numbers and text (in separate columns). For example:
<pre class="prettyprint lang-javascript">&quot;Fred&quot; > &quot;1&quot; // true*
&quot;Fred&quot; < &quot;10&quot; // false
&quot;Fred&quot; > 1 // false (numeric comparisons occur with parsed table data)
&quot;Fred&quot; > 1 // false
&quot;Fred&quot; < 10 // false</pre>* For comparisons, letters have a greater <a href="http://en.wikipedia.org/wiki/Ascii#ASCII_printable_characters">ASCII value</a> than numbers.
</li>
<li>Range query - A search for any number range (<code>1 - 10</code>) is not allowed because, if any columns contain text, then no rows will result. The examples are the same as the search operators examples above.</li>
<li>Not Match query - A search for not matches (<code>!a</code>) is not allowed because tables that contain both numbers and text (in separate columns) will always show all rows. For example:
<pre class="prettyprint lang-javascript">&quot;Frank&quot;.search(&quot;a&quot;)) // 2 (a match, so this row "may" be hidden)
&quot;Fred&quot;.search(&quot;a&quot;) // -1 (a not match! so this row will always show)
&quot;25&quot;.search(&quot;a&quot;) // -1 (a not match! so this row will always show)
&quot;1/1/2014&quot;.search(&quot;a&quot;) // -1 (a not match! so this row will always show)</pre>
</li>
<li>Allowed filters include plain text matching, fuzzy search (<code>~</code>), exact match (<code>&quot;</code>), wild card matches( <code>?</code> or <code>*</code>), regex (<code>/\d/g</code>), and logical and (<code>a &amp;&amp; b</code>)/or (<code>a|b</code>) matches.</li>
</ul>
<li>Setting this option should work properly with or without the column filters. The only issue you would have is if you triggered a search on the table using an array with undefined or null array values, like this:
<pre class="prettyprint lang-javascript">// apply "2?%" filter to the fifth column (zero-based index)
var columns = [];
columns[5] = '2?%';
// anyMatch will kick in on undefined column filters,
// unless the array looks like this: columns = [ '', '', '', '', '', '2?%' ]
$('table').trigger('search', [ columns ]);</pre></li>
</li>
<li>
</ul>
</p>
@ -81,7 +97,7 @@
<div id="demo">
<input class="search" type="search">
<button type="button" class="reset">Reset Search</button> <!-- targetted by the "filter_reset" option -->
<button type="button" class="reset">Reset Search</button> <!-- targeted by the "filter_reset" option -->
<table class="tablesorter">
<thead>

73
docs/example-widget-filter.html
View File

@ -14,6 +14,10 @@
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<style>
/* override the vertical-align top in the blue theme */
.notes.tablesorter-blue tbody td { vertical-align: middle; }
</style>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
@ -104,13 +108,14 @@
// External search
// buttons set up like this:
// <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
$('button.search').click(function(){
// <button type="button" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
$('button[data-filter-column]').click(function(){
/*** first method *** data-filter-column="1" data-filter-text="!son"
add search value to Discount column (zero based index) input */
var filters = [],
col = $(this).data('filter-column'), // zero-based index
txt = $(this).data('filter-text'); // text to add to filter
$t = $(this),
col = $t.data('filter-column'), // zero-based index
txt = $t.data('filter-text') || $t.text(); // text to add to filter
filters[col] = txt;
// using "table.hasFilters" here to make sure we aren't targetting a sticky header
@ -139,15 +144,15 @@
<script>
$(function(){
/*
$('button').not('.toggle').click(function(){
var $t = $(this),
filter = [];
filter[$t.attr('data-column')] = $t.text();
filter[$t.attr('data-filter-column')] = $t.attr('data-filter-column') || $t.text();
$.tablesorter.setFilters( $('table.tablesorter'), filter, true );
return false;
});
*/
// *** widgetfilter_startsWith toggle button ***
$('button.toggle').click(function(){
var c = $('table.tablesorter')[0].config,
@ -194,20 +199,20 @@ $(function(){
<li>This widget uses jQuery's <code>.nextUntil()</code> function which is only available is jQuery version 1.4+.</li>
<li>This widget does work with tablesorter v2.0.5.</li>
<li>Using the filters:
<table class="tablesorter-blue">
<thead><tr><th>Type <small class="bright">(1)</small></th><td>Description</th><th>Example</th></tr></thead>
<table class="tablesorter-blue notes">
<thead><tr><th>Type <small class="bright">(1)</small></th><td>Description</th><th>Examples</th></tr></thead>
<tbody>
<tr><td class="center">text</td><td>Any text entered in the filter will <strong>match</strong> text found within the column</td><td><code>abc</code> (finds &quot;abc&quot;, &quot;abcd&quot;, &quot;abcde&quot;, etc)</td></tr>
<tr><td class="center"><code>~</code></td><td>Fuzzy search (matches sequential characters) the query by adding a tilde to the beginning of the query (<span class="version">v2.13.3</span>)</td><td><button data-column="1">~bee</button> (matches &quot;Bruce Lee&quot; and &quot;Brenda Dexter&quot;) or <button data-column="1">~piano</button> (matches &quot;Philip Aaron Wong&quot;)</td></tr>
<tr><td class="center"><code>&quot;</code></td><td>To exactly match the search query, add a quote, apostrophe or equal sign to the beginning and/or end of the query</td><td><code>abc&quot;</code> or <code>abc=</code> (exactly match &quot;abc&quot;)</td></tr>
<tr><td class="center"><code>?</code></td><td>Wildcard for a single, non-space character.</td><td><code>J?n</code> (finds &quot;Jan&quot; and &quot;Jun&quot;, but not &quot;Joan&quot;)</td></tr>
<tr><td class="center"><code>*</code></td><td>Wildcard for zero or more non-space characters.</td><td><code>B*k</code> (matches &quot;Black&quot; and &quot;Book&quot;)</td></tr>
<tr><td class="center"><code>/\d/</code></td><td>Add any regex to the query to use in the query</td><td><code>/b[aeiou]g/i</code> (finds &quot;bag&quot;, &quot;beg&quot;, &quot;BIG&quot;, &quot;Bug&quot;, etc)</td></tr>
<tr><td class="center"><code>&lt; &lt;= &gt;= &gt;</code></td><td>Find alphabetical or numerical values less than or greater than or equal to the filtered query <small class="bright">(2)</small>.</td><td><button data-column="5">&gt;= 10</button> (find values greater than or equal to 10)</td></tr>
<tr><td class="center"><code>!</code></td><td>Not operator. Filter the column with content that <strong>do not</strong> match the query.</td><td><code>!fe</code> (hide rows with &quot;female&quot; in that column, but shows rows with &quot;male&quot;)</td></tr>
<tr><td class="center"><code>&nbsp;&&&nbsp;</code> or <code>&nbsp;AND&nbsp;</code></td><td>Logical &quot;and&quot;. Filter the column for content that matches text from either side of the operator.</td><td><code>box && bat</code> (matches a column cell that contains both &quot;box&quot; and &quot;bat&quot;)</td></tr>
<tr><td class="center"><code>|</code> or <code>&nbsp;OR&nbsp;</code></td><td>Logical &quot;or&quot; (Vertical bar). Filter the column for content that matches text from either side of the bar <small class="bright">(3)</small>.</td><td><code>box|bat</code> (matches a column cell with either &quot;box&quot; or &quot;bat&quot;)</td></tr>
<tr><td class="center"><code>&nbsp;-&nbsp;</code> or <code>&nbsp;to&nbsp;</code></td><td>Find a range of values. Make sure there is a space before and after the dash (or the word &quot;to&quot;) <small class="bright">(2)</small>.</td><td><button data-column="3">10 - 30</button> or <button data-column="4">10 to 30</button> (match values between 10 and 30)</td></tr>
<tr><td class="center">text</td><td>Any text entered in the filter will <strong>match</strong> text found within the column</td><td><code>abc</code> (finds &quot;abc&quot;, &quot;abcd&quot;, &quot;abcde&quot;, etc); <button data-filter-column="1">Aaron</button> (finds &quot;Aaron&quot; and &quot;Philip Aaron Wong&quot;)</td></tr>
<tr><td class="center"><code>~</code></td><td>Fuzzy search (matches sequential characters) the query by adding a tilde to the beginning of the query (<span class="version">v2.13.3</span>)</td><td><button data-filter-column="1">~bee</button> (matches &quot;Bruce Lee&quot; and &quot;Brenda Dexter&quot;) or <button data-filter-column="1">~piano</button> (matches &quot;Philip Aaron Wong&quot;)</td></tr>
<tr><td class="center"><code>&quot;</code></td><td>To exactly match the search query, add a quote, apostrophe or equal sign to the beginning and/or end of the query</td><td><code>abc&quot;</code> or <code>abc=</code> (exactly match &quot;abc&quot;); <button data-filter-column="1">John&quot;</button> or <button data-filter-column="1">John=</button> (exactly match &quot;John&quot;)</td></tr>
<tr><td class="center"><code>?</code></td><td>Wildcard for a single, non-space character.</td><td><code>J?n</code> (finds &quot;Jan&quot; and &quot;Jun&quot;, but not &quot;Joan&quot;); <button data-filter-column="2">a?s</button> (finds &quot;Dumass&quot; and &quot;Evans&quot;, but not &quot;McMasters&quot;)</td></tr>
<tr><td class="center"><code>*</code></td><td>Wildcard for zero or more non-space characters.</td><td><code>B*k</code> (matches &quot;Black&quot; and &quot;Book&quot;); <button data-filter-column="2">a*s</button> (matches &quot;Dumass&quot;, &quot;Evans&quot; and &quot;McMasters&quot;)</td></tr>
<tr><td class="center"><code>/\d/</code></td><td>Add any regex to the query to use in the query</td><td><code>/b[aeiou]g/i</code> (finds &quot;bag&quot;, &quot;beg&quot;, &quot;BIG&quot;, &quot;Bug&quot;, etc); <button data-filter-column="1">/r$/</button> (matches text that ends with an &quot;r&quot;)</td></tr>
<tr><td class="center"><code>&lt; &lt;= &gt;= &gt;</code></td><td>Find alphabetical or numerical values less than or greater than or equal to the filtered query <small class="bright">(2)</small>.</td><td><button data-filter-column="5">&gt;= 10</button> (find values greater than or equal to 10)</td></tr>
<tr><td class="center"><code>!</code></td><td>Not operator. Filter the column with content that <strong>do not</strong> match the query.</td><td><code>!fe</code> (hide rows with &quot;female&quot; in that column, but shows rows with &quot;male&quot;); <button data-filter-column="1">!a</button> (find text that doesn't contain an &quot;a&quot;)</td></tr>
<tr><td class="center"><code>&nbsp;&&&nbsp;</code> or <code>&nbsp;AND&nbsp;</code></td><td>Logical &quot;and&quot;. Filter the column for content that matches text from either side of the operator.</td><td><code>box && bat</code> (matches a column cell that contains both &quot;box&quot; and &quot;bat&quot;); <button data-filter-column="1">Br && c</button> (Find text that contains both &quot;br&quot; and &quot;c&quot;)</td></tr>
<tr><td class="center"><code>|</code> or <code>&nbsp;OR&nbsp;</code></td><td>Logical &quot;or&quot; (Vertical bar). Filter the column for content that matches text from either side of the bar <small class="bright">(3)</small>.</td><td><code>box|bat</code> (matches a column cell with either &quot;box&quot; or &quot;bat&quot;); <button data-filter-column="1">Alex|Peter</button> (Find text that contains either &quot;Alex&quot; or &quot;Peter&quot;)</td></tr>
<tr><td class="center"><code>&nbsp;-&nbsp;</code> or <code>&nbsp;to&nbsp;</code></td><td>Find a range of values. Make sure there is a space before and after the dash (or the word &quot;to&quot;) <small class="bright">(2)</small>.</td><td><button data-filter-column="3">10 - 30</button> or <button data-filter-column="4">10 to 30</button> (match values between 10 and 30)</td></tr>
</tbody>
</table>
<span class="bright">(1)</span> You cannot combine these operators with each other (except for the wildcards).<br>
@ -221,9 +226,11 @@ $(function(){
<div>
<h3>Filter widget defaults (added inside of tablesorter <code>widgetOptions</code>)</h3>
<ul>
<li><code>filter_anyMatch : false</code> - if true, a match in any column will show the row (see <a href="example-widget-filter-any-match.html">the demo</a> for exceptions).</li>
<li><code>filter_childRows : false</code> - if true, filter includes child row content in the search.</li>
<li><code>filter_columnFilters : true</code> - if true, a filter will be added to the top of each table column.</li>
<li><code>filter_cssFilter : ''</code> - extra css class name added to the filter row & each input in the row.</li>
<li><code>filter_defaultAttrib : 'data-value'</code> - this option contains the name of the data-attribute which contains the default (starting) filter value.</li>
<li><code>filter_filteredRow : 'filtered'</code> - css class name added to filtered rows (rows that are not showing); needed by pager plugin.</li>
<li><code>filter_formatter : null</code> - add custom filter elements to the filter row.</li>
<li><code>filter_functions : null</code> - add custom filter functions using this option.</li>
@ -290,6 +297,24 @@ $.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ] );
$.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true );</pre>
This method returns <code>true</code> if the filters were sucessfully applied, or <code>false</code> if the table does have a filter row.
</blockquote>
<h3>Bind External filter</h3>
<blockquote>
Use this method in conjunction with the <code>filter_anyMatch</code> option (set to <code>true</code> (<span class="version">v2.13.3</span>).
<pre class="prettyprint lang-javascript">// Target the $('.search') input using built in functioning
// this binds to the search using "search" and "keyup"
// Allows using filter_liveSearch or delayed search &
// pressing escape to cancel the search
$.tablesorter.filter.bindSearch( $table, $('.search') );</pre>
If you don't care about the enhanced search filter, then bind to both the &quot;keyup&quot; and &quot;search&quot; events
<pre class="prettyprint lang-javascript">// Basic search binding, alternate to the above
// bind to search - pressing enter and clicking on "x" to clear (Webkit)
// keyup allows dynamic searching
$(".search").bind('search keyup', function (e) {
$('table').trigger('search', [ [this.value] ]);
});
</pre></blockquote>
</div>
<h3><a href="#">Events</a></h3>
@ -310,12 +335,12 @@ $.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true );</pr
<h1>Demo</h1>
<button type="button" class="toggle fsw">Toggle</button> filter_startsWith : <span id="start">false</span> (if true, search from beginning of cell content only)<br>
<button type="button" class="toggle fic">Toggle</button> filter_ignoreCase : <span id="case">true</span> (if false, the search will be case sensitive)<br>
<button type="button" class="toggle ffm">Toggle</button> filter-match (if class name added to the "First Name" column, all "or" searches will only match the content; Search <button data-column="1">alex|br*|c</button> in the First Name column (<span class="version">2.10.1</span>).
<button type="button" class="toggle ffm">Toggle</button> filter-match (if class name added to the "First Name" column, all "or" searches will only match the content; Search <button data-filter-column="1">alex|br*|c</button> in the First Name column (<span class="version">2.10.1</span>).
<hr>
<div id="demo">
<button type="button" class="search" data-filter-column="5" data-filter-text="2?%">Saved Search</button> (search the Discount column for &quot;2?%&quot;)<br>
<button type="button" class="reset">Reset Search</button> <!-- targetted by the "filter_reset" option -->
<button type="button" data-filter-column="5" data-filter-text="2?%">Saved Search</button> (search the Discount column for &quot;2?%&quot;)<br>
<button type="button" class="reset">Reset Search</button> <!-- targeted by the "filter_reset" option -->
<table class="tablesorter">
<thead>
@ -430,7 +455,7 @@ $.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true );</pr
<div class="next-up">
<hr />
Next up: <a href="example-widget-filter-custom.html">jQuery custom filter widget &rsaquo;&rsaquo;</a>
Next up: <a href="example-widget-filter-any-match.html">jQuery Any Match filter widget &rsaquo;&rsaquo;</a>
</div>
</div>

43
docs/index.html
View File

@ -292,7 +292,7 @@
<h4 id="extras">Plugins / Custom Widgets / Custom Parsers</h4>
<ul>
<li>
<a href="example-pager.html">Pager plugin</a> (<span class="version updated">v2.13.2</span>).<br>
<a href="example-pager.html">Pager plugin</a> (<span class="version updated">v2.13.3</span>).<br>
<br>
</li>
<li><a href="example-widget-columns.html">Columns widget</a> (v2.0.17)</li>
@ -300,6 +300,7 @@
<li>Filter Widget:
<ul>
<li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.13.3</span>)</li>
<li><a href="example-widget-filter-any-match.html">any-match</a> (<span class="version">v2.13.3</span>)</li>
<li><a href="example-widget-filter-custom.html">custom</a> (v2.3.6; <span class="version updated">v2.10.1</span>)</li>
<li>formatter (<a href="example-widget-filter-formatter-1.html">jQuery UI widgets</a> and <a href="example-widget-filter-formatter-2.html">HTML5 Elements</a>) (v2.7.7).</li>
</ul>
@ -557,7 +558,7 @@
<td>Additional CSS class applied to style the header row - <span class="version updated">v2.11</span>
<div class="collapsible"><br>
Changed to empty string in v2.11, as the <code>&quot;tablesorter-headerRow&quot;</code> class will always be added to a table header row; this option now contains any additional class names to add.<br>
<p>This CSS style was added in v2.4, prior to that the row would get the same class as the header cells. This class was added to make it easier to determine what element was being targetted in the plugin.</p>
<p>This CSS style was added in v2.4, prior to that the row would get the same class as the header cells. This class was added to make it easier to determine what element was being targeted in the plugin.</p>
</div>
</td>
<td></td>
@ -1382,6 +1383,8 @@ $(function(){
columns_tfoot : true,
// *** filter widget ***
// show any column matches
filter_anyMatch : false,
// Include child rows content in the search
filter_childRows : false,
// show column filters
@ -1654,6 +1657,38 @@ $(function(){
<td><a href="example-widget-columns.html">Example</a></td>
</tr>
<tr id="widget-filter-anymatch">
<td><a href="#" class="toggle2">filter_anyMatch</a></td>
<td>Boolean</td>
<td>false</td>
<td>
Filter widget: Show any rows that match a search query. If this option is <code>true</code> any column match will show that row; but there are limitations (<span class="version">v2.13.3</span>).
<div class="collapsible">
<br>
It is best if this <a href="#widget-filter-anymatch"><code>filter_anyMatch</code></a> option is used with a single search input as follows:
<pre class="prettyprint lang-html">&lt;input class=&quot;search&quot; type=&quot;search&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;reset&quot;&gt;Reset Search&lt;/button&gt;</pre>
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["filter"],
widgetOptions : {
filter_anyMatch : true,
filter_columnFilters: false,
filter_reset: '.reset'
}
});
// Target the $('.search') input using built in functioning
// this binds to the search using "search" and "keyup"
// Allows using filter_liveSearch or delayed search &
// pressing escape to cancel the search
$.tablesorter.filter.bindSearch( $table, $('.search') );
});</pre></div>
</td>
<td><a href="example-widget-filter-any-match.html">Example</a></td>
</tr>
<tr id="widget-filter-childrows">
<td><a href="#" class="toggle2">filter_childRows</a></td>
<td>Boolean</td>
@ -1946,7 +1981,7 @@ $(function(){
<tr id="widget-filter-onlyAvail">
<td><a href="#" class="toggle2">filter_onlyAvail</a></td>
<td>String</td>
<td>'filter-onlyAvail'</td>
<td>&quot;filter-onlyAvail&quot;</td>
<td>
Filter widget: If a header contains a select dropdown and this class name, only the available (visible) options in the column will show (<span class="version">v2.10.1</span>).
<div class="collapsible">
@ -2094,7 +2129,7 @@ $('table').trigger('search', false);</pre></div>
<tr id="widget-filter-defaultattrib">
<td><a href="#" class="toggle2">filter_defaultAttrib</a></td>
<td>String</td>
<td>'data-value'</td>
<td>&quot;data-value&quot;</td>
<td>
Filter widget: This option contains the name of the data-attribute which contains the default (starting) filter value (<span class="version">v2.10.8</span>).
<div class="collapsible">

45
js/jquery.tablesorter.widgets.js
View File

@ -332,6 +332,7 @@ ts.addWidget({
id: "filter",
priority: 50,
options : {
filter_anyMatch : false, // if true overrides default find rows behaviours and if any column matches query it returns that row
filter_childRows : false, // if true, filter includes child row content in the search
filter_columnFilters : true, // if true, a filter will be added to the top of each table column
filter_cssFilter : '', // css class name added to the filter row & each input in the row (tablesorter-filter is ALWAYS added)
@ -689,7 +690,8 @@ ts.filter = {
}
},
bindSearch: function(table, $el) {
var wo = table.config.widgetOptions;
table = $(table)[0];
var external, wo = table.config.widgetOptions;
$el.bind('keyup search', function(event, filter) {
// emulate what webkit does.... escape clears the filter
if (event.which === 27) {
@ -700,7 +702,9 @@ ts.filter = {
( event.which >= 37 && event.which <= 40 ) || (event.which !== 13 && wo.filter_liveSearch === false) ) ) ) {
return;
}
ts.filter.searching(table, filter);
// external searches won't have a filter parameter, so grab the value
external = $(this).hasClass('tablesorter-filter') ? filter : [ $(this).val() ];
ts.filter.searching(table, filter, external);
});
},
checkFilters: function(table, filter) {
@ -777,6 +781,8 @@ ts.filter = {
wo = c.widgetOptions,
columns = c.columns,
$tbodies = c.$tbodies,
// anyMatch really screws up with these types of filters
anyMatchNotAllowedTypes = [ 'range', 'operators' ],
// parse columns after formatter, in case the class is added at that point
parsed = c.$headers.map(function(columnIndex) {
return (ts.getData) ?
@ -817,7 +823,7 @@ ts.filter = {
$cells = $rows.eq(rowIndex).children('td');
for (columnIndex = 0; columnIndex < columns; columnIndex++) {
// ignore if filter is empty or disabled
if (filters[columnIndex]) {
if (filters[columnIndex] || wo.filter_anyMatch) {
cached = c.cache[tbodyIndex].normalized[rowIndex][columnIndex];
// check if column data should be from the cell or from parsed data
if (wo.filter_useParsedData || parsed[columnIndex]) {
@ -825,9 +831,15 @@ ts.filter = {
} else {
// using older or original tablesorter
exact = $.trim($cells.eq(columnIndex).text());
exact = c.sortLocaleCompare ? ts.replaceAccents(exact) : exact; // issue #405
}
iExact = !ts.filter.regex.type.test(typeof exact) && wo.filter_ignoreCase ? exact.toLocaleLowerCase() : exact;
result = showRow; // if showRow is true, show that row
if (typeof filters[columnIndex] === "undefined" || filters[columnIndex] === null) {
filters[columnIndex] = wo.filter_anyMatch ? combinedFilters : filters[columnIndex];
}
// replace accents - see #357
filters[columnIndex] = c.sortLocaleCompare ? ts.replaceAccents(filters[columnIndex]) : filters[columnIndex];
// val = case insensitive, filters[columnIndex] = case sensitive
@ -848,11 +860,13 @@ ts.filter = {
filterMatched = null;
// cycle through the different filters
// filters return a boolean or null if nothing matches
$.each(ts.filter.types, function(indx, type) {
matches = type( filters[columnIndex], iFilter, exact, iExact, cached, columnIndex, table, wo, parsed );
if (matches !== null) {
filterMatched = matches;
return false;
$.each(ts.filter.types, function(type, typeFunction) {
if (!wo.filter_anyMatch || (wo.filter_anyMatch && anyMatchNotAllowedTypes.indexOf(type) < 0)) {
matches = typeFunction( filters[columnIndex], iFilter, exact, iExact, cached, columnIndex, table, wo, parsed );
if (matches !== null) {
filterMatched = matches;
return false;
}
}
});
if (filterMatched !== null) {
@ -863,7 +877,14 @@ ts.filter = {
result = ( (!wo.filter_startsWith && exact >= 0) || (wo.filter_startsWith && exact === 0) );
}
}
showRow = (result) ? showRow : false;
if (wo.filter_anyMatch) {
showRow = result;
if (showRow){
break;
}
} else {
showRow = (result) ? showRow : false;
}
}
}
$rows[rowIndex].style.display = (showRow ? '' : 'none');
@ -951,13 +972,13 @@ ts.filter = {
}
}
},
searching: function(table, filter) {
if (typeof filter === 'undefined' || filter === true) {
searching: function(table, filter, external) {
if (typeof filter === 'undefined' || filter === true || external) {
var wo = table.config.widgetOptions;
// delay filtering
clearTimeout(wo.searchTimer);
wo.searchTimer = setTimeout(function() {
ts.filter.checkFilters(table, filter);
ts.filter.checkFilters(table, external || filter);
}, wo.filter_liveSearch ? wo.filter_searchDelay : 10);
} else {
// skip delay