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 filter_matchType option. Fixes #1170

Browse Source
This commit is contained in:
Rob Garrison 2016-03-01 22:23:59 -06:00
parent 7d326a6975
commit 5fc8ecb3e5
5 changed files with 61 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/js/widgets/widget-filter.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -103,6 +103,9 @@
// if true, search column content while the user types (with a delay)
filter_liveSearch : true,
// global query settings ('exact' or 'match'); overridden by "filter-match" or "filter-exact" class
filter_matchType : { 'input': 'exact', 'select': 'exact' },
// a header with a select dropdown & this class name will only show available (visible) options within that drop down.
filter_onlyAvail : 'filter-onlyAvail',
@ -499,6 +502,18 @@ $(function(){
</td>
</tr>
<tr id="filter-matchtype">
<td><a href="#" class="permalink">filter_matchType</a></td>
<td>{ 'input': 'exact', 'select': 'exact' }</td>
<td>
This option sets the global setting that applied to either input or select filters (<span class="version">v2.25.5</span>)
<div class="collapsible">
<br>
There are only two options: "exact" and "match"; and it defaults to "exact" if anything else is entered.
</div>
</td>
</tr>
<tr id="filter-only-avail">
<td><span class="permalink">filter_onlyAvail</span></td>
<td>'filter-onlyAvail'</td>
@ -591,6 +606,7 @@ $(function(){
<div>
Class names that can be added to the <code>th</code> header cells:
<ul>
<li><code>filter-exact</code> - applies to the column where the user can use the logical "or" or "and" search. This does the opposite of the "filter-match" class, and overrides it if applied.</li>
<li><code>filter-false</code> - disable the filter for a specific header column.</li>
<li><code>filter-select</code> - build a default select box for a column (shows unique column content). See the <a href="example-widget-filter-custom.html">custom filter widget</a> demo for an example.</li>
<li><code>filter-select-nosort</code> - when a default select box is built, this option prevents the sorting of select options leaving them in their original table order (<span class="version">v2.16.3</span>).</li>

3
docs/example-widget-formatter.html
View File

@ -49,6 +49,7 @@
theme: 'blue',
widgets: ['formatter', 'filter'],
widgetOptions: {
filter_matchType : { 'input': 'match', 'select': 'exact' },
formatter_column: {
'.emphasize' : function( text, data ) {
return '<strong>' + text + '</strong>';
@ -205,7 +206,7 @@ function prettyDate(date){
<div id="demo"><table id="table" class="tablesorter">
<thead>
<tr>
<th class="emphasize">Super Hero</th>
<th class="emphasize filter-exact">Super Hero</th>
<th class="supercar">Super Car</th>
<th class="duckify filter-select">Image Links</th>
<th class="date">Added</th>

23
docs/index.html
View File

@ -458,9 +458,9 @@
<li><a href="example-widget-column-selector.html">Column selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.25.1</span>).</li>
<li><a href="example-widget-editable.html">Content editable widget</a> (v2.9; <span class="version updated">v2.25.0</span>).</li>
<li><span class="label label-info">Beta</span> <a href="example-dragtable.html">Dragtable mod</a> - (jQuery UI widget for column reordering [<a href="http://stackoverflow.com/a/27770224/145346">ref</a>]; <span class="version">v2.24.0</span>).</li>
<li><span class="results">&dagger;</span> Filter widget (<span class="version updated">v2.25.2</span>):
<li><span class="results">&dagger;</span> Filter widget (<span class="version updated">v2.25.5</span>):
<ul>
<li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.23.5</span>).</li>
<li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.25.5</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.22.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 filter functions</a> (v2.3.6; <span class="version updated">v2.22.0</span>).</li>
@ -1894,6 +1894,8 @@ $(function(){
filter_ignoreCase : true,
// if true, search column content while the user types (with a delay)
filter_liveSearch : true,
// global query settings ('exact' or 'match'); overridden by "filter-match" or "filter-exact" class
filter_matchType : { 'input': 'exact', 'select': 'exact' },
// a selector in a header with this class name will only show selected options in the drop down
filter_onlyAvail : 'filter-onlyAvail',
// default placeholder text (overridden by any header "data-placeholder" setting)
@ -2887,6 +2889,23 @@ filter_cssFilter : [ '', 'hidden', '', 'hidden' ]</pre>
<td></td>
</tr>
<tr id="widget-filter-matchtype">
<td><a href="#" class="permalink">filter_matchType</a></td>
<td>Object</td>
<td>{ 'input': 'exact', 'select': 'exact' }</td>
<td>
Filter widget: This option sets the global setting that applied to either input or select filters (<span class="version">v2.25.5</span>)
<div class="collapsible">
<p>A basic input filter will match the filter query until a "and" and "or" type search is performed.</p>
<p>By default, select filters and "and" and "or type searchs will look for an exact match, and to override this behavior you *had* to add a "filter-match" class to the columns to allow partial matches.</p>
<p>This option allows you to set a global "match" setting and save you the trouble of adding a bunch of classes.</p>
<p>There are only two options: "exact" and "match"; and it defaults to "exact" if anything else is entered.</p>
In the demo, try searching for <code>super or man</code> in the first column.
</div>
</td>
<td><a href="example-widget-formatter.html">Example</a></td>
</tr>
<tr id="widget-filter-onlyAvail">
<td><a href="#" class="permalink">filter_onlyAvail</a></td>
<td>String</td>

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

@ -45,6 +45,7 @@
filter_hideFilters : false, // collapse filter row when mouse leaves the area
filter_ignoreCase : true, // if true, make all searches case-insensitive
filter_liveSearch : true, // if true, search column content while the user types ( with a delay )
filter_matchType : { 'input': 'exact', 'select': 'exact' }, // global query settings ('exact' or 'match'); overridden by "filter-match" or "filter-exact" class
filter_onlyAvail : 'filter-onlyAvail', // a header with a select dropdown & this class name will only show available ( visible ) options within the drop down
filter_placeholder : { search : '', select : '' }, // default placeholder text ( overridden by any header 'data-placeholder' setting )
filter_reset : null, // jQuery selector string of an element used to reset the filters
@ -1029,6 +1030,24 @@
}
return filterMatched;
},
matchType: function( c, columnIndex ) {
var isMatch,
$el = c.$headerIndexed[ columnIndex ];
// filter-exact > filter-match > filter_matchType for type
if ( $el.hasClass( 'filter-exact' ) ) {
isMatch = false;
} else if ( $el.hasClass( 'filter-match' ) ) {
isMatch = true;
} else {
// filter-select is not applied when filter_functions are used, so look for a select
$el = c.$filters.eq( columnIndex ).find( '.' + tscss.filter );
isMatch = $el.length ?
c.widgetOptions.filter_matchType[ ( $el[ 0 ].nodeName || '' ).toLowerCase() ] === 'match' :
// default to exact, if no inputs found
false;
}
return isMatch;
},
processRow: function( c, data, vars ) {
var result, filterMatched,
fxn, ffxn, txt,
@ -1106,8 +1125,7 @@
data.exact = c.sortLocaleCompare ? ts.replaceAccents( result ) : result; // issue #405
data.iExact = !tsfRegex.type.test( typeof data.exact ) && wo.filter_ignoreCase ?
data.exact.toLowerCase() : data.exact;
data.isMatch = c.$headerIndexed[ data.index ].hasClass( 'filter-match' );
data.isMatch = tsf.matchType( c, columnIndex );
result = showRow; // if showRow is true, show that row
@ -1302,7 +1320,7 @@
!( tsfRegex.isNeg1.test( val ) || tsfRegex.isNeg2.test( val ) ) &&
// if filtering using a select without a 'filter-match' class ( exact match ) - fixes #593
!( val !== '' && c.$filters && c.$filters.filter( '[data-column="' + indx + '"]' ).find( 'select' ).length &&
!c.$headerIndexed[indx].hasClass( 'filter-match' ) );
!tsf.matchType( c, indx ) );
}
}
notFiltered = $rows.not( '.' + wo.filter_filteredRow ).length;