library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Filter: add config parameter to filter functions

Browse Source
This commit is contained in:
Mottie 2015-02-23 22:28:14 -06:00
parent fb9ad1acac
commit 1972857048
5 changed files with 69 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/example-widget-filter-custom-search.html
View File

@ -283,7 +283,7 @@ $.extend($.tablesorter.language, {
<div class="next-up"> <div class="next-up">
<hr /> <hr />
Next up: <a href="example-widget-filter-formatter-1.html">jQuery custom filter widget formatter (jQuery UI widgets) &rsaquo;&rsaquo;</a> Next up: <a href="example-widget-filter-custom-search2.html">Custom Filter Widget Search Types (example 2) &rsaquo;&rsaquo;</a>
</div> </div>
</div> </div>

13
docs/example-widget-filter-custom-search2.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Search Type - Example 2</title> <title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Search Type (example 2)</title>
<!-- jQuery --> <!-- jQuery -->
<script src="js/jquery-latest.min.js"></script> <script src="js/jquery-latest.min.js"></script>
@ -45,7 +45,8 @@
} }
low = ts.formatFloat( parts[0], c.table ); low = ts.formatFloat( parts[0], c.table );
high = ts.formatFloat( parts[1], c.table ); high = ts.formatFloat( parts[1], c.table );
val = ts.formatFloat( data.iFilter.replace( nondigit, '' ), c.table ); // use parser for the column
val = c.parsers[data.index].format( data.iFilter, c.table );
if ( high < low ) { if ( high < low ) {
// swap high & low // swap high & low
t = high; high = low; low = t; t = high; high = low; low = t;
@ -87,7 +88,7 @@ $(function(){
<body> <body>
<div id="banner"> <div id="banner">
<h1>table<em>sorter</em></h1> <h1>table<em>sorter</em></h1>
<h2>Custom Filter Widget Search Type - Example 2</h2> <h2>Custom Filter Widget Search Type (example 2)</h2>
<h3>Flexible client-side table sorting</h3> <h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a> <a href="index.html">Back to documentation</a>
</div> </div>
@ -96,6 +97,7 @@ $(function(){
<p class="tip"> <p class="tip">
<em>NOTE!</em> <em>NOTE!</em>
<ul> <ul>
<li>In <span class="version updated">v2.20.2</span>, the "insideRange" function was updated to use the column parser; this change would allow the sorting of dates, if using the <a href="example-parsers-date-range.html">date-range parsers</a> also added in v2.20.2.</li>
<li>This is another example of how to add a custom filter search type - see <a href="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">this page</a> for details on how to add your own.</li> <li>This is another example of how to add a custom filter search type - see <a href="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">this page</a> for details on how to add your own.</li>
<li>This "insideRange" search type does the following: <li>This "insideRange" search type does the following:
<ul> <ul>
@ -143,6 +145,11 @@ $(function(){
<pre class="prettyprint lang-javascript"></pre> <pre class="prettyprint lang-javascript"></pre>
</div> </div>
<div class="next-up">
<hr />
Next up: <a href="example-widget-filter-formatter-1.html">jQuery custom filter widget formatter (jQuery UI widgets) &rsaquo;&rsaquo;</a>
</div>
</div> </div>
</body> </body>

57
docs/example-widget-filter-custom.html
View File

@ -109,28 +109,28 @@
// '.first-name' : true, // '.first-name' : true,
// Exact match only // Exact match only
1 : function(e, n, f, i, $r) { 1 : function(e, n, f, i, $r, c) {
return e === f; return e === f;
}, },
// Add these options to the select dropdown (regex example) // Add these options to the select dropdown (regex example)
2 : { 2 : {
"A - D" : function(e, n, f, i, $r) { return /^[A-D]/.test(e); }, "A - D" : function(e, n, f, i, $r, c) { return /^[A-D]/.test(e); },
"E - H" : function(e, n, f, i, $r) { return /^[E-H]/.test(e); }, "E - H" : function(e, n, f, i, $r, c) { return /^[E-H]/.test(e); },
"I - L" : function(e, n, f, i, $r) { return /^[I-L]/.test(e); }, "I - L" : function(e, n, f, i, $r, c) { return /^[I-L]/.test(e); },
"M - P" : function(e, n, f, i, $r) { return /^[M-P]/.test(e); }, "M - P" : function(e, n, f, i, $r, c) { return /^[M-P]/.test(e); },
"Q - T" : function(e, n, f, i, $r) { return /^[Q-T]/.test(e); }, "Q - T" : function(e, n, f, i, $r, c) { return /^[Q-T]/.test(e); },
"U - X" : function(e, n, f, i, $r) { return /^[U-X]/.test(e); }, "U - X" : function(e, n, f, i, $r, c) { return /^[U-X]/.test(e); },
"Y - Z" : function(e, n, f, i, $r) { return /^[Y-Z]/.test(e); } "Y - Z" : function(e, n, f, i, $r, c) { return /^[Y-Z]/.test(e); }
}, },
// Add these options to the select dropdown (numerical comparison example) // Add these options to the select dropdown (numerical comparison example)
// Note that only the normalized (n) value will contain numerical data // 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) // If you use the exact text, you'll need to parse it (parseFloat or parseInt)
4 : { 4 : {
"< $10" : function(e, n, f, i, $r) { return n < 10; }, "< $10" : function(e, n, f, i, $r, c) { return n < 10; },
"$10 - $100" : function(e, n, f, i, $r) { return n >= 10 && n <=100; }, "$10 - $100" : function(e, n, f, i, $r, c) { return n >= 10 && n <=100; },
"> $100" : function(e, n, f, i, $r) { return n > 100; } "> $100" : function(e, n, f, i, $r, c) { return n > 100; }
} }
} }
@ -157,6 +157,7 @@
<h3><a href="#">Notes</a></h3> <h3><a href="#">Notes</a></h3>
<div> <div>
<ul> <ul>
<li>In <span class="version">v2.20.2</span>, the filter functions provide an additional parameter <code>c</code> which is the <code>table.config</code>.</li>
<li>In <span class="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>In <span class="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>In <span class="version">v2.16.3</span>, <li>In <span class="version">v2.16.3</span>,
<ul> <ul>
@ -202,7 +203,7 @@
<li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<pre class="prettyprint lang-javascript">filter_functions : { <li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<pre class="prettyprint lang-javascript">filter_functions : {
// Exact match only // Exact match only
1 : function(e, n, f, i, $r) { 1 : function(e, n, f, i, $r, c) {
return e === f; return e === f;
} }
@ -222,13 +223,13 @@
// Add these options to the select dropdown (regex example) // Add these options to the select dropdown (regex example)
2 : { 2 : {
&quot;A - D&quot; : function(e, n, f, i, $r) { return /^[A-D]/.test(e); }, &quot;A - D&quot; : function(e, n, f, i, $r, c) { return /^[A-D]/.test(e); },
&quot;E - H&quot; : function(e, n, f, i, $r) { return /^[E-H]/.test(e); }, &quot;E - H&quot; : function(e, n, f, i, $r, c) { return /^[E-H]/.test(e); },
&quot;I - L&quot; : function(e, n, f, i, $r) { return /^[I-L]/.test(e); }, &quot;I - L&quot; : function(e, n, f, i, $r, c) { return /^[I-L]/.test(e); },
&quot;M - P&quot; : function(e, n, f, i, $r) { return /^[M-P]/.test(e); }, &quot;M - P&quot; : function(e, n, f, i, $r, c) { return /^[M-P]/.test(e); },
&quot;Q - T&quot; : function(e, n, f, i, $r) { return /^[Q-T]/.test(e); }, &quot;Q - T&quot; : function(e, n, f, i, $r, c) { return /^[Q-T]/.test(e); },
&quot;U - X&quot; : function(e, n, f, i, $r) { return /^[U-X]/.test(e); }, &quot;U - X&quot; : function(e, n, f, i, $r, c) { return /^[U-X]/.test(e); },
&quot;Y - Z&quot; : function(e, n, f, i, $r) { return /^[Y-Z]/.test(e); } &quot;Y - Z&quot; : function(e, n, f, i, $r, c) { return /^[Y-Z]/.test(e); }
} }
}</pre></li> }</pre></li>
@ -237,9 +238,9 @@
// Note that only the normalized (n) value will contain numerical data // 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) // If you use the exact text, you'll need to parse it (parseFloat or parseInt)
4 : { 4 : {
&quot;&lt; $10&quot; : function(e, n, f, i, $r) { return n &lt; 10; }, &quot;&lt; $10&quot; : function(e, n, f, i, $r, c) { return n &lt; 10; },
&quot;$10 - $100&quot; : function(e, n, f, i, $r) { return n &gt;= 10 && n &lt;=100; }, &quot;$10 - $100&quot; : function(e, n, f, i, $r, c) { return n &gt;= 10 && n &lt;=100; },
&quot;&gt; $100&quot; : function(e, n, f, i, $r) { return n &gt; 100; } &quot;&gt; $100&quot; : function(e, n, f, i, $r, c) { return n &gt; 100; }
} }
}</pre></li> }</pre></li>
<li>See the &quot;Filter function information&quot; section below.</li> <li>See the &quot;Filter function information&quot; section below.</li>
@ -266,7 +267,9 @@
<h3><a href="#"><strong>Filter function information</strong></a></h3> <h3><a href="#"><strong>Filter function information</strong></a></h3>
<div> <div>
<ul> <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 class="prettyprint lang-javascript">function(e, n, f, i, $r) { return test; /* test should be a Boolean (true or false) */ }</pre></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.
<pre class="prettyprint lang-javascript">function(e, n, f, i, $r, c) { 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>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. <li><strong>Normalized table cell data (n)</strong> is the next varibale passed to the function.
<ul> <ul>
@ -279,7 +282,13 @@
</li> </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>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>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); this allows access to any extra information within. To access the current cell, just use <code>$r.children().eq(i)</code>.</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><span class="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>
</ul>
<li>The <strong>config (c)</strong> is the <code>table.config</code> (added <span class="version">v2.20.2</span>).</li>
</ul> </ul>
</div> </div>
</div> </div>

40
docs/index.html
View File

@ -487,9 +487,9 @@
<li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.18.1</span>)</li> <li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.18.1</span>)</li>
<li><a href="example-widget-filter-any-match.html">external option (match any column)</a> (<span class="version">v2.13.3</span>; <span class="version updated">v2.20.0</span>)</li> <li><a href="example-widget-filter-any-match.html">external option (match any column)</a> (<span class="version">v2.13.3</span>; <span class="version updated">v2.20.0</span>)</li>
<li><a href="example-widget-filter-external-inputs.html">external inputs</a> (<span class="version">v2.14</span>; <span class="version updated">v2.18.0</span>)</li> <li><a href="example-widget-filter-external-inputs.html">external inputs</a> (<span class="version">v2.14</span>; <span class="version updated">v2.18.0</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><a href="example-widget-filter-custom.html">custom</a> (v2.3.6; <span class="version updated">v2.20.2</span>)</li>
<li><a href="example-widget-filter-custom-search.html">custom searches</a> (<span class="version">v2.17.5</span>; <span class="version updated">v2.17.8</span>)</li> <li><a href="example-widget-filter-custom-search.html">custom searches</a> (<span class="version">v2.17.5</span>; <span class="version updated">v2.17.8</span>)</li>
<li><a href="example-widget-filter-custom-search2.html">custom search (example #2)</a> (<span class="version">v2.19.1</span>)</li> <li><a href="example-widget-filter-custom-search2.html">custom search (example #2)</a> (<span class="version">v2.19.1</span>; <span class="version updated">v2.20.2</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; <span class="version updated">v2.17.5</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; <span class="version updated">v2.17.5</span>).</li>
<li>formatter: <a href="example-widget-filter-formatter-select2.html">select2</a> (<span class="version">v2.16.0</span>; <span class="version updated">v2.19.0</span>)</li> <li>formatter: <a href="example-widget-filter-formatter-select2.html">select2</a> (<span class="version">v2.16.0</span>; <span class="version updated">v2.19.0</span>)</li>
</ul> </ul>
@ -2493,7 +2493,7 @@ $(function(){
In <span class="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) that points to a table <em>header</em> cell.<br> In <span class="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) that points to a table <em>header</em> cell.<br>
<pre class="prettyprint lang-js">filter_functions : { <pre class="prettyprint lang-js">filter_functions : {
".col-date" : { ".col-date" : {
"&lt; 2004" : function (e, n, f, i) { "&lt; 2004" : function (e, n, f, i, $r, c) {
return n &lt; Date.UTC(2004, 0, 1); // &lt; Jan 1 2004 return n &lt; Date.UTC(2004, 0, 1); // &lt; Jan 1 2004
}, },
... ...
@ -2533,16 +2533,18 @@ $(function(){
// n = normalized value returned by the column parser // n = normalized value returned by the column parser
// f = search filter input value // f = search filter input value
// i = column index // i = column index
// $r = jQuery element of current row
// c = table.config
filter_functions: { filter_functions: {
// Add these options to the select dropdown (regex example) // Add these options to the select dropdown (regex example)
2 : { 2 : {
"A - D" : function(e, n, f, i) { return /^[A-D]/.test(e); }, "A - D" : function(e, n, f, i, $r, c) { return /^[A-D]/.test(e); },
"E - H" : function(e, n, f, i) { return /^[E-H]/.test(e); }, "E - H" : function(e, n, f, i, $r, c) { return /^[E-H]/.test(e); },
"I - L" : function(e, n, f, i) { return /^[I-L]/.test(e); }, "I - L" : function(e, n, f, i, $r, c) { return /^[I-L]/.test(e); },
"M - P" : function(e, n, f, i) { return /^[M-P]/.test(e); }, "M - P" : function(e, n, f, i, $r, c) { return /^[M-P]/.test(e); },
"Q - T" : function(e, n, f, i) { return /^[Q-T]/.test(e); }, "Q - T" : function(e, n, f, i, $r, c) { return /^[Q-T]/.test(e); },
"U - X" : function(e, n, f, i) { return /^[U-X]/.test(e); }, "U - X" : function(e, n, f, i, $r, c) { return /^[U-X]/.test(e); },
"Y - Z" : function(e, n, f, i) { return /^[Y-Z]/.test(e); } "Y - Z" : function(e, n, f, i, $r, c) { return /^[Y-Z]/.test(e); }
} }
} }
} }
@ -2558,14 +2560,16 @@ $(function(){
// n = normalized value returned by the column parser // n = normalized value returned by the column parser
// f = search filter input value // f = search filter input value
// i = column index // i = column index
// $r = jQuery element of current row
// c = table.config
filter_functions: { filter_functions: {
// Add these options to the select dropdown (numerical comparison example) // Add these options to the select dropdown (numerical comparison example)
// Note that only the normalized (n) value will contain numerical data // 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) // If you use the exact text, you'll need to parse it (parseFloat or parseInt)
4 : { 4 : {
"&lt; $10" : function(e, n, f, i) { return n &lt; 10; }, "&lt; $10" : function(e, n, f, i, $r, c) { return n &lt; 10; },
"$10 - $100" : function(e, n, f, i) { return n &gt;= 10 && n &lt;=100; }, "$10 - $100" : function(e, n, f, i, $r, c) { return n &gt;= 10 && n &lt;=100; },
"&gt; $100" : function(e, n, f, i) { return n &gt; 100; } "&gt; $100" : function(e, n, f, i, $r, c) { return n &gt; 100; }
} }
} }
} }
@ -2584,9 +2588,11 @@ $(function(){
// n = normalized value returned by the column parser // n = normalized value returned by the column parser
// f = search filter input value // f = search filter input value
// i = column index // i = column index
// $r = jQuery element of current row
// c = table.config
filter_functions: { filter_functions: {
// Exact match only // Exact match only
1 : function(e, n, f, i) { 1 : function(e, n, f, i, $r, c) {
return e === f; return e === f;
} }
} }
@ -2945,9 +2951,9 @@ $('table').trigger('search', false);</pre></div>
filter_functions: { filter_functions: {
// Add these options to the select dropdown (regex example) // Add these options to the select dropdown (regex example)
1 : { 1 : {
"<10|Less than 10" : function(e, n, f, i) { return n < 10; }, "<10|Less than 10" : function(e, n, f, i, $r, c) { return n < 10; },
"10 - 100|Between 10 & 100" : function(e, n, f, i) { return n >= 10 && n <=100; }, "10 - 100|Between 10 & 100" : function(e, n, f, i, $r, c) { return n >= 10 && n <=100; },
">100|Greater than 100" : function(e, n, f, i) { return n > 100; } ">100|Greater than 100" : function(e, n, f, i, $r, c) { return n > 100; }
} }
}, },
// filter_selectSource array text left of the separator is added to the option value, right into the option text // filter_selectSource array text left of the separator is added to the option value, right into the option text

4
js/widgets/widget-filter.js
View File

@ -998,10 +998,10 @@ ts.filter = {
result = ($cell.hasClass('filter-match')) ? data.iExact.search(data.iFilter) >= 0 : data.filter === data.exact; result = ($cell.hasClass('filter-match')) ? data.iExact.search(data.iFilter) >= 0 : data.filter === data.exact;
} else if (typeof fxn === 'function') { } else if (typeof fxn === 'function') {
// filter callback( exact cell content, parser normalized content, filter input value, column index, jQuery row object ) // filter callback( exact cell content, parser normalized content, filter input value, column index, jQuery row object )
result = fxn(data.exact, data.cache, data.filter, columnIndex, $rows.eq(rowIndex)); result = fxn(data.exact, data.cache, data.filter, columnIndex, $rows.eq(rowIndex), c);
} else if (typeof fxn[ffxn || data.filter] === 'function') { } else if (typeof fxn[ffxn || data.filter] === 'function') {
// selector option function // selector option function
result = fxn[ffxn || data.filter](data.exact, data.cache, data.filter, columnIndex, $rows.eq(rowIndex)); result = fxn[ffxn || data.filter](data.exact, data.cache, data.filter, columnIndex, $rows.eq(rowIndex), c);
} }
} else { } else {
filterMatched = null; filterMatched = null;