library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Filter: add filter_columnAnyMatch option

Browse Source 
tweak anymatch code & added examples to the demo
This commit is contained in:
Mottie 2015-02-20 14:10:59 -06:00
parent a3e53194b0
commit fbc5c01c6a
4 changed files with 81 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/example-widget-filter-any-match.html
View File

@ -40,6 +40,19 @@
}
});
// make demo search buttons work
$('button[data-column]').on('click', function(){
var $this = $(this),
totalColumns = $table[0].config.columns,
col = $this.data('column'), // zero-based index or "all"
filter = [];
// text to add to filter
filter[ col === 'all' ? totalColumns : col ] = $this.text();
$table.trigger('search', [ filter ]);
return false;
});
});</script>
</head>
@ -59,6 +72,7 @@
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.20.0</span>, <a href="https://github.com/MaksimProgr">@MasksimProgr</a> added a method to allow targeting a specific column using the anyMatch filter. Find more details in the AnyMatch section below.</li>
<li>In <span class="version">v2.18.0</span>, the external search data column can be set to multiple columns (<code>data-column="0-2,4,6-7"</code>). Please see the <a href="example-widget-filter-external-inputs.html">Filter Widget External Inputs</a> demo for more details.</li>
<li>In <span class="version">v2.17.8</span>, added a default fuzzy search to the "First Name" column.</li>
<li>This is a demo of the <a href="index.html#widget-filter-external"><code>filter_external</code></a> option (added <span class="version">v2.15</span>).</li>
@ -74,6 +88,30 @@
</ul>
</div>
<h3><a href="#">AnyMatch Searches</a></h3>
<div>
<ul>
<li>In <span class="version">v2.20.0</span>, the anyMatch filter can target specific columns using the following format:
<pre class="prettyprint lang-js">#:{query}</pre>
<ul>
<li>where <code>#</code> is the column <strong>one-based index</strong> (non-developers count from one)</li>
<li>and <code>{query}</code> is the specific column query.</li>
</ul>
<br>
You can disable this type of search by setting the new <code>filter_columnAnyMatch</code> option to <code>false</code>.
<h4>Examples</h4>
<ul>
<li><button type="button" data-column="all">4:&gt;30</button> Find values &gt; 30 in the age column</li>
<li><button type="button" data-column="all">2:aa</button> Include a fuzzy search (see <code>filter_defaultFilter</code> setting) and look for "aa" in the first name column (four results should show).</li>
<li><button type="button" data-column="all">1:5 && 7:12</button> Find ranks with a "5" in them and find dates with a "12" </li>
<li>This column specific anyMatch does not support using an OR column search like <code>1:5|7:12</code> </li>
</ul>
<p></p>
<span class="label warning">* NOTE *</span> When a AnyMatch search of this type is active, it adds filter queries to specific columns, so if the filters are saved and you reload the page, the specified <em>column filters will become populated</em> along with the AnyMatch search.
</li>
</ul>
</div>
<h3><a href="#">Limitations</a></h3>
<div>
<ul>

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

@ -52,6 +52,9 @@
// if you set this to false, make sure you perform a search using the second method below
filter_columnFilters : true,
// if true, allows using "#:{query}" in AnyMatch searches (column:query; added v2.20.0)
filter_columnAnyMatch: true,
// css class name added to the filter cell (string or array)
filter_cellFilter : '',
@ -296,6 +299,21 @@ $(function(){
<td>if <code>true</code>, a filter will be added to the top of each table column.</td>
</tr>
<tr id="filter-column-anymatch">
<td><a href="#" class="permalink">filter_columnAnyMatch</a></td>
<td>true</td>
<td>if <code>true</code>, allows using "#:{query}" in anyMatch searches (<span class="version">v2.20.0</span>).
<div class="collapsible">
<br>
Users can use the anymatch input to target a specific column, using a one-based index.
<p></p>
For example: In the table below, searching for <code>2:aa</code> in an anymatch filter will result in "Phillip Aaron Wong" and "Aaron" showing in the First Name column.
<p></p>
See live examples in the <a href="example-widget-filter-any-match.html#anymatch_searches">Filter Widget External Search</a> demo.
</div>
</td>
</tr>
<tr id="filter-cell-filter">
<td><a href="#" class="permalink">filter_cellFilter</a></td>
<td>''</td>

6
docs/index.html
View File

@ -378,7 +378,7 @@
<ul>
<li>The <a href="example-widget-bootstrap-theme.html">Bootstrap</a> &amp; <a href="example-widget-ui-theme.html">jQuery UI</a> themes require the uitheme widget.</li>
<li>Set up a <a href="example-option-theme-metro-style.html">Metro style theme</a> (<span class="version">v2.16.4</span>)</li>
<li>Use css to <a href="example-css-highlighting.html">highlight rows &amp; columns</a> (<span class="version">v2.19.2</span>)</li>
<li>Use css to <a href="example-css-highlighting.html">highlight rows &amp; columns</a> (<span class="version">v2.20.0</span>)</li>
</ul>
<p></p>
@ -482,10 +482,10 @@
<li><a href="example-widget-column-selector.html">Column Selector widget</a> (<span class="version">v2.15</span>; <span class="version updated">v2.19.0</span>).</li>
<li><a href="example-widget-editable.html">Content Editable widget</a> (v2.9; <span class="version updated">v2.19.1</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.19.0</span>).</li>
<li><span class="results">&dagger;</span> Filter Widget (<span class="version updated">v2.19.0</span>):
<li><span class="results">&dagger;</span> Filter Widget (<span class="version updated">v2.20.0</span>):
<ul>
<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.18.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-custom.html">custom</a> (v2.3.6; <span class="version updated">v2.10.1</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>

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

@ -363,6 +363,7 @@ ts.addWidget({
options : {
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_columnAnyMatch: true, // if true, allows using "#:{query}" in AnyMatch searches (column:query)
filter_cellFilter : '', // css class name added to the filter cell (string or array)
filter_cssFilter : '', // css class name added to the filter row & each input in the row (tablesorter-filter is ALWAYS added)
filter_defaultFilter : {}, // add a default column filter type "~{query}" to make fuzzy searches default; "{q1} AND {q2}" to make all searches use a logical AND.
@ -1119,6 +1120,7 @@ ts.filter = {
var len, norm_rows, $rows, rowIndex, tbodyIndex, $tbody, $cells, $cell, columnIndex,
childRow, lastSearch, hasSelect, matches, result, showRow, time, val, indx,
notFiltered, searchFiltered, filterMatched, excludeMatch, fxn, ffxn,
query, injected, res, id,
regex = ts.filter.regex,
c = table.config,
wo = c.widgetOptions,
@ -1160,28 +1162,29 @@ ts.filter = {
// filter out child rows
$rows = $rows.not('.' + c.cssChildRow);
len = $rows.length;
if ((wo.filter_$anyMatch && wo.filter_$anyMatch.length) || filters[c.columns]) {
if ( (wo.filter_$anyMatch && wo.filter_$anyMatch.length) || ('' + filters[c.columns]) ) {
data.anyMatchFlag = true;
data.anyMatchFilter = wo.filter_$anyMatch && ts.filter.getLatestSearch( wo.filter_$anyMatch ).val() || filters[c.columns] || '';
// specific columns search
var query = data.anyMatchFilter.split( ts.filter.regex.andSplit );
var injected = false;
for (var i = 0; i<query.length; i++) {
var res = query[i].split(":");
if (res.length>1) {
var id = res[0];
if (Math.floor(id) == id && $.isNumeric(id)) { // if id is an integer
filters[res[0]] = res[1];
query.splice(i, 1);
i--;
injected = true;
data.anyMatchFilter = wo.filter_$anyMatch && ts.filter.getLatestSearch( wo.filter_$anyMatch ).val() || ( '' + filters[c.columns] ) || '';
if (wo.filter_columnAnyMatch) {
// specific columns search
query = data.anyMatchFilter.split( ts.filter.regex.andSplit );
injected = false;
for (indx = 0; indx < query.length; indx++) {
res = query[indx].split(':');
if ( res.length > 1 ) {
// make the column a one-based index ( non-developers start counting from one :P )
id = parseInt( res[0], 10 ) - 1;
if ( id >= 0 && id < c.columns ) { // if id is an integer
filters[id] = res[1];
query.splice(indx, 1);
indx--;
injected = true;
}
}
}
}
if (injected) {
data.anyMatchFilter = query.join(" && ");
if (injected) {
data.anyMatchFilter = query.join(' && ');
}
}
}
@ -1215,7 +1218,6 @@ ts.filter = {
ts.log( "Searching through " + ( searchFiltered && notFiltered < len ? notFiltered : "all" ) + " rows" );
}
if (data.anyMatchFlag) {
data.anyMatchFilter.search();
if (c.sortLocaleCompare) {
// replace accents
data.anyMatchFilter = ts.replaceAccents(data.anyMatchFilter);