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

added filter formatter search delay - fixes issue #245

Browse Source
This commit is contained in:
Mottie 2013-02-24 00:04:46 -06:00
parent 7b672d678b
commit 87e6b0a196
5 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/example-widget-filter-formatter-1.html
View File

@ -49,6 +49,7 @@
value: 0,
min: 0,
max: 100,
delayed: true,
valueToHeader: false
});
},
@ -57,6 +58,7 @@
values: [1, 70],
min: 1,
max: 70,
delayed: true,
valueToHeader: false
});
},
@ -66,6 +68,7 @@
max : 45,
value: 1,
step: 1,
delayed: true,
addToggle: true,
exactMatch: true,
numberFormat: "n"
@ -85,6 +88,7 @@
values: [1, 160],
min: 1,
max: 160,
delayed: true,
valueToHeader: false
});
}
@ -144,6 +148,7 @@
value: 0, // starting value
min: 0, // minimum value
max: 100, // maximum value
delayed: true, // delay search (set by filter_searchDelay)
valueToHeader: false, // add current slider value to the header cell
exactMatch: true, // exact (true) or match (false)
allText: 'all', // text shown when the slider is at the minimum value
@ -157,6 +162,7 @@
<li>The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the <code>valueToHeader</code> option to <code>true</code> to add the slider value to the header cell above the filter.</li>
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
<li>Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the <code>allText</code> option.</li>
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
</ul>
</div>
@ -187,6 +193,7 @@
values: [1, 70], // starting range
min: 1, // minimum value
max: 70, // maximum value
delayed: true, // delay search (set by filter_searchDelay)
exactMatch: true, // exact (true) or match (false)
valueToHeader: false // add current slider value to the header cell
});
@ -198,6 +205,7 @@
values: [1, 160], // starting range
min: 1, // minimum value
max: 160, // maximum value
delayed: true, // delay search (set by filter_searchDelay)
exactMatch: true, // exact (true) or match (false)
valueToHeader: false // add current slider value to the header cell
});
@ -210,6 +218,7 @@
});</pre></li>
<li>The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the <code>valueToHeader</code> option to <code>true</code> to add the slider value to the header cell above the filter.</li>
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
</ul>
</div>
@ -237,6 +246,7 @@
max : 45,
value: 1,
step: 1,
delayed: true,
addToggle: true,
exactMatch: true,
numberFormat: "n"
@ -249,6 +259,7 @@
});</pre></li>
<li>This is the only jQuery UI widget that includes a toggle button. The toggle button is added by default, but if you don't want it, set the <code>addToggle</code> option to <code>false</code>. Without the toggle button, the filter is always active.</li>
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
</ul>
</div>
@ -320,6 +331,10 @@
<pre class="prettyprint lang-javascript">$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');</pre>
</li>
<li>Since, by default, the filter only matches cell content, a <code>1</code> in the filter will show all rows with a one no matter where it is located. So, if you need an exact match, add an equal sign to the end of the value (<code>1=</code>). This forces the filter to exactly match the value in the search input.</li>
<li>To include a search delay, trigger the search on the hidden input and pass a boolean. If <code>true</code> or undefined, the search will be delayed and not delayed if <code>false</code>. Delay time set by <code>filter_searchDelay</code> option).
<pre class="prettyprint lang-javascript">$input.val( newVal ).trigger('search', false); // no search delay</pre>
</li>
</ul>
</div>

6
docs/example-widget-filter-formatter-2.html
View File

@ -47,6 +47,7 @@
value: 0,
min: 0,
max: 100,
delayed: true,
valueToHeader: true
});
},
@ -62,6 +63,7 @@
value: 1,
min: 1,
max: 65,
delayed: true,
addToggle: true,
exactMatch: true
});
@ -119,6 +121,7 @@
value: 0,
min: 0,
max: 100,
delayed: true,
valueToHeader: true,
exactMatch: true,
allText: 'all'
@ -133,6 +136,7 @@
<li>The tooltip above the slider is NOT added in this example because the slider handle is not a separate element. But if you are interested, you can use <a href="http://codepen.io/chriscoyier/pen/lokyH">this code</a> by Chris Coyier to animate a range slider bubble.</li>
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
<li>Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the <code>allText</code> option.</li>
<li>A search delay option was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
</ul>
</div>
@ -195,6 +199,7 @@
value: 1,
min: 1,
max: 65,
delayed: true,
addToggle: true,
exactMatch: true
});
@ -206,6 +211,7 @@
});</pre></li>
<li>This is spinner includes a toggle button. The toggle button is added by default, but if you don't want it, set the <code>addToggle</code> option to <code>false</code>. Without the toggle button, the filter is always active.</li>
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
<li>A search delay option was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
</ul>
</div>

23
js/jquery.tablesorter.widgets-filter-formatter.js
View File

@ -1,4 +1,4 @@
/*! Filter widget formatter functions - updated 2/17/2013
/*! Filter widget formatter functions - updated 2/24/2013
* requires: tableSorter 2.7.7+ and jQuery 1.4.3+
*
* jQuery UI spinner
@ -26,6 +26,7 @@ $.tablesorter.filterFormatter = {
max : 100,
step: 1,
value: 1,
delayed: true,
addToggle: true,
disabled: false,
exactMatch: true,
@ -44,7 +45,7 @@ $.tablesorter.filterFormatter = {
}
$cell.find('.filter')
.val( chkd ? v + (o.exactMatch ? '=' : '') : '' ) // add equal to the end, so we filter exact numbers
.trigger('search').end()
.trigger('search', o.delayed).end()
.find('#spinner' + indx).spinner( o.disabled || !chkd ? 'disable' : 'enable' );
};
@ -99,6 +100,7 @@ $.tablesorter.filterFormatter = {
max: 100,
step: 1,
range: "min",
delayed: true,
valueToHeader : false,
exactMatch: true,
allText: 'all'
@ -120,7 +122,7 @@ $.tablesorter.filterFormatter = {
// update the hidden input;
// ****** ADD AN EQUAL SIGN TO THE END! <- this makes the slide exactly match the number ******
// when the value is at the minimum, clear the hidden input so all rows will be seen
$cell.find('.filter').val(v === o.min ? '' : v + (o.exactMatch ? '=' : '')).trigger('search');
$cell.find('.filter').val(v === o.min ? '' : v + (o.exactMatch ? '=' : '')).trigger('search', o.delayed);
};
$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');
@ -163,6 +165,7 @@ $.tablesorter.filterFormatter = {
min : 0,
max : 100,
range: true,
delayed: true,
valueToHeader : false
}, rangeDef ),
// Add a hidden input to hold the range values
@ -184,7 +187,7 @@ $.tablesorter.filterFormatter = {
.eq(1).attr('data-value', val[1]); // value popup shown via css
}
// update the hidden input
$cell.find('.filter').val(range).trigger('search');
$cell.find('.filter').val(range).trigger('search', o.delayed);
};
$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');
@ -286,6 +289,7 @@ $.tablesorter.filterFormatter = {
min: 0,
max: 100,
step: 1,
delayed: true,
disabled: false,
addToggle: true,
exactMatch: true
@ -296,13 +300,11 @@ $.tablesorter.filterFormatter = {
// test if HTML5 number is supported - from Modernizr
numberSupported = $number.attr('type') === 'number' && $number.val() !== 'test',
updateNumber = function(){
var chkd = true, val = $cell.find('.number').val();
if (o.addToggle) {
chkd = $cell.find('.toggle').is(':checked');
}
var val = $cell.find('.number').val(),
chkd = o.addToggle ? $cell.find('.toggle').is(':checked') : true;
$cell
.find('input[type=hidden]').val( chkd ? val + (o.exactMatch ? '=' : '') : '' ) // add equal to the end, so we filter exact numbers
.trigger('search');
.trigger('search', o.delayed);
if ($cell.find('.number').length) {
$cell.find('.number')[0].disabled = (o.disabled || !chkd);
}
@ -342,6 +344,7 @@ $.tablesorter.filterFormatter = {
min: 0,
max: 100,
step: 1,
delayed: true,
valueToHeader: true,
exactMatch: true,
allText: 'all'
@ -357,7 +360,7 @@ $.tablesorter.filterFormatter = {
var val = $cell.find('.range').val();
$cell
.find('input[type=hidden]').val( val == o.min ? '' : val + (o.exactMatch ? '=' : '')) // add equal to the end, so we filter exact numbers
.trigger('search');
.trigger('search', o.delayed);
// or add current color to the header cell, if desired
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.curvalue').html(' (' + (val == o.min ? o.allText : val) + ')');
};

4
js/jquery.tablesorter.widgets-filter-formatter.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -410,7 +410,7 @@ $.tablesorter.addWidget({
}
// Look for quotes or equals to get an exact match; ignore type since xi could be numeric
/*jshint eqeqeq:false */
} else if (reg.exact.test(val) && xi == val.replace(reg.exact, '')){
} else if (val.replace(reg.exact, '') == xi){
ff = true;
// Look for a not match
} else if (/^\!/.test(val)){
@ -576,22 +576,23 @@ $.tablesorter.addWidget({
if (e.type === 'filterReset') {
$t.find('.' + css).val('');
}
checkFilters(e.type === 'search' ? filter : '');
// send false argument to force a new search; otherwise if the filter hasn't changed, it will return
checkFilters(e.type === 'search' ? filter : false);
return false;
})
.find('input.' + css).bind('keyup search', function(e, filter){
// ignore arrow and meta keys; allow backspace
if ((e.which < 32 && e.which !== 8) || (e.which >= 37 && e.which <=40)) { return; }
if (e.type === 'keyup' && ((e.which < 32 && e.which !== 8) || (e.which >= 37 && e.which <=40))) { return; }
// skip delay
if (typeof filter !== 'undefined'){
if (typeof filter !== 'undefined' && filter !== true){
checkFilters(filter);
return false;
}
// delay filtering
clearTimeout(timer);
timer = setTimeout(function(){
checkFilters();
checkFilters(false);
}, wo.filter_searchDelay || 300);
return false;
});
// parse columns after formatter, in case the class is added at that point