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 "filterResetSaved" method. See #1173

Browse Source
This commit is contained in:
Rob Garrison 2016-03-08 14:39:23 -06:00
parent 89e9eaa3c2
commit bfee55735f
5 changed files with 62 additions and 17 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

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

@ -18,6 +18,7 @@
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/widgets/widget-storage.js"></script>
<script src="../js/widgets/widget-filter.js"></script>
<script>

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

@ -22,6 +22,7 @@
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/widgets/widget-storage.js"></script>
<script src="../js/widgets/widget-filter.js"></script>
<script id="js">$(function() {
@ -153,6 +154,18 @@
});
// Clear stored filters - added v2.25.6
$('.resetsaved').click(function(){
$('#table').trigger('filterResetSaved');
// show quick popup to indicate something happened
var $message = $('<span class="results"> Reset</span>').insertAfter(this);
setTimeout(function(){
$message.remove();
}, 500);
return false;
});
// External search
// buttons set up like this:
// <button type="button" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
@ -234,6 +247,7 @@ $(function(){
<h3 id="notes"><a href="#">Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.25.6</span>, added <a class="intlink" href="#methods"><code>filterResetSaved</code></a> method to clear stored filter values.</li>
<li>In <span class="version">v2.25.2</span>, added <a class="intlink" href="#filter-resetonesc"><code>filter_resetOnEsc</code></a> option.</li>
<li>In <span class="version">v2.22.2</span>,
<ul>
@ -242,22 +256,22 @@ $(function(){
<li>Added the ability to nest filter types with a logical "OR" or a logical "AND". Try these filters: <button data-filter-column="1">a && !o</button> (<span class="label warning">*NOTE*</span> try this with and without the filter-match class applied), <button data-filter-column="3">&lt20 or &gt;40</button> or <button data-filter-column="3">&gt;20 && &lt;40</button></li>
</ul>
</li>
<li>In <span class="version">v2.22.0</span>
<ul>
<li>Regex filter searches now cache the created regex object for each query to optimize speed & a regex search now properly uses case-sensitive content.</li>
<li>Add <code>data</code> parameter to <a class="intlink" href="#filter-functions"><code>filter_functions</code></a> (<a href="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">get more details</a>).</li>
<li>Any match searches which target specific columns will no longer save each filter to its respective column; see <a href="example-widget-filter-any-match.html#anymatch_searches">"AnyMatch Searches"</a> documentation.</li>
<li>Operator filter searchs now ignore empty strings (because <code>"" &lt; 10</code> is <code>true</code>).</li>
<li>Added <a class="intlink" href="#filter-child-by-column"><code>filter_childByColumn</code></a> option which allows the filtering columns in both the parent & child rows. Demo added to the <a href="example-child-rows-filtered.html#child-by-column">filtered child rows demo</a></li>
</ul>
</li>
<li>In <span class="version updated">v2.18.0</span>, added <code>filter_cellFilter</code> &amp; the ability to set multiple "any" match columns for an external search (see the <a href="example-widget-filter-external-inputs.html">external inputs demo</a> for more details).</li>
</ul>
<div class="accordion start-closed">
<h3 id="old-notes"><a href="#">Older Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.22.0</span>
<ul>
<li>Regex filter searches now cache the created regex object for each query to optimize speed & a regex search now properly uses case-sensitive content.</li>
<li>Add <code>data</code> parameter to <a class="intlink" href="#filter-functions"><code>filter_functions</code></a> (<a href="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">get more details</a>).</li>
<li>Any match searches which target specific columns will no longer save each filter to its respective column; see <a href="example-widget-filter-any-match.html#anymatch_searches">"AnyMatch Searches"</a> documentation.</li>
<li>Operator filter searchs now ignore empty strings (because <code>"" &lt; 10</code> is <code>true</code>).</li>
<li>Added <a class="intlink" href="#filter-child-by-column"><code>filter_childByColumn</code></a> option which allows the filtering columns in both the parent & child rows. Demo added to the <a href="example-child-rows-filtered.html#child-by-column">filtered child rows demo</a></li>
</ul>
</li>
<li>In <span class="version updated">v2.18.0</span>, added <code>filter_cellFilter</code> &amp; the ability to set multiple "any" match columns for an external search (see the <a href="example-widget-filter-external-inputs.html">external inputs demo</a> for more details).</li>
<li>In <span class="version">v2.17.8</span>, filter selects will default to exact matches unless the header cell has a <a class="intlink" href="#classes"><code>"filter-match"</code></a> class added.</li>
<li>In <span class="version">v2.17.1</span>, added a not exact match (<code>!=</code>) filter type.</li>
<li>In <span class="version updated">v2.16+</span>,
@ -642,13 +656,21 @@ $(function(){
<h3 id="method-reset">filterReset</h3>
<blockquote>
Use the <code>filterReset</code> method to reset (clear) all of the current filters using this method
Use the <code>filterReset</code> method to reset (clear) all of the current filters as follows:
<pre class="prettyprint lang-javascript">$('table').trigger('filterReset');</pre>
or, just add an element to your page and point to it by setting the <code>filter_reset</code> option, to allow user interaction.
<p></p>
<span class="label label-info">*NOTE*</span> delegated event bindings are used so these "reset" elements can be dynamically added and removed from the document.
</blockquote>
<h3 id="method-reset">filterResetSaved</h3>
<blockquote>
Use the <code>filterResetSaved</code> method to reset (clear) the saved filters (in storage) as follows (<span class="version">v2.25.6</span>):
<pre class="prettyprint lang-javascript">// equivalent to:
// $.tablesorter.storage( $('#table'), 'tablesorter-filters', '' );
$('#table').trigger('filterResetSaved');</pre>
</blockquote>
<h3 id="method-search">Search</h3>
<blockquote>
With this method, you can pass an array of filter values:
@ -764,8 +786,8 @@ $.extend($.tablesorter.language, {
<li>So you will need to escape any special characters contained in these values (e.g. <code>. \ + * ? [ ^ ] $ ( ) { } = ! &lt; &gt; | : -</code>).</li>
<li>This function might help (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Using_special_characters">ref</a>):
<pre class="prettyprint lang-js">function escapeRegExp( string ) {
return string.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
}</pre>
return string.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
}</pre>
</li>
</ul>
</li>
@ -783,6 +805,7 @@ $.extend($.tablesorter.language, {
<div id="demo">Search <button type="button" data-filter-column="5" data-filter-text="2?%">2?%</button> in the Discount column<br>
<button type="button" class="reset">Reset</button> <!-- targeted by the "filter_reset" option -->
<button type="button" class="resetsaved" title="Reload the page to see that the saved filters have cleared">Reset Saved Filters</button>
<table id="table" class="tablesorter">
<thead>

21
docs/index.html
View File

@ -458,7 +458,7 @@
<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.5</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.5</span>):
<li><span class="results">&dagger;</span> Filter widget (<span class="version updated">v2.25.6</span>):
<ul>
<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>
@ -5303,6 +5303,25 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
<td><a href="example-widget-filter.html">Example</a></td>
</tr>
<tr id="filterresetsaved">
<td><a href="#" class="permalink">filterResetSaved</a></td>
<td>filter: Make the filter widget reset any saved searches (<span class="version">v2.25.6</span>).
<div class="collapsible"><br>
Use this as follows:
<pre class="prettyprint lang-js">$(function(){
// this is the same code that the "filter_reset" element runs to clear out the filters.
$('button').click(function(){
$('#myTable').trigger('filterResetSaved');
return false;
});</pre>
This is the equivalent of executing this function:
<pre class="prettyprint lang-js">// clear the current table stored filters
$.tablesorter.storage( $('#myTable'), 'tablesorter-filters', '' );</pre>
</div>
</td>
<td><a href="example-widget-filter.html">Example</td>
</tr>
<tr id="savesortreset">
<td><a href="#" class="permalink">saveSortReset</a></td>
<td>Trigger the saveSort widget to clear any saved sorts for that specific table (v2.7.11).

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

@ -402,8 +402,8 @@
tsf.buildRow( table, c, wo );
}
txt = 'addRows updateCell update updateRows updateComplete appendCache filterReset filterEnd search '
.split( ' ' ).join( c.namespace + 'filter ' );
txt = 'addRows updateCell update updateRows updateComplete appendCache filterReset ' +
'filterResetSaved filterEnd search '.split( ' ' ).join( c.namespace + 'filter ' );
c.$table.bind( txt, function( event, filter ) {
val = wo.filter_hideEmpty &&
$.isEmptyObject( c.cache ) &&
@ -417,6 +417,8 @@
if ( event.type === 'filterReset' ) {
c.$table.find( '.' + tscss.filter ).add( wo.filter_$externalFilters ).val( '' );
tsf.searching( table, [] );
} else if ( event.type === 'filterResetSaved' ) {
ts.storage( table, 'tablesorter-filters', '' );
} else if ( event.type === 'filterEnd' ) {
tsf.buildDefault( table, true );
} else {