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 formatter requirement to call function when updated. Fixes #668

Browse Source
This commit is contained in:
Mottie 2014-07-17 11:18:07 -05:00
parent 9dea6c656e
commit a5a793b393
5 changed files with 62 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -184,6 +184,7 @@
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>As of <span class="version">v2.17.5</span>, if writing a custom filterFormatter function, you'll need to call an additional function after initialization has completed so the "filterInit" event isn't triggered prematurely. See the "Custom Filter Formatter Function Information" section below for more details.</li>
<li>In <span class="version updated">v2.17.0</span>, the <code>filter_formatter</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.0</span>, the <code>filter_placeholder</code> option was added. See the jQuery UI Datepicker Range Selector section for more details.</li>
<li>In <span class="version">v2.15.0</span>, the following changes were made:
@ -269,7 +270,7 @@
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
compare : [ '=', '>=', '<=' ], // any comparison would override the exactMatch option
compare : [ '=', '&gt;=', '&lt;=' ], // any comparison would override the exactMatch option
selected : 2, // zero-based index of compare starting selected value
// add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
@ -286,7 +287,7 @@
valueToHeader: false, // add current slider value to the header cell
exactMatch: false, // exact (true) or match (false)
allText: 'all', // text shown when slider is at the minimum value; ignored when compare has a value
compare: [ '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
compare: [ '=', '&gt;=', '&lt;=' ], // search values greater/less than selected value; overrides exactMatch
selected : 1, // zero-based index of compare starting selected value
// add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
@ -378,7 +379,7 @@
delayed: true, // delay search (set by filter_searchDelay)
addToggle: false, // add a toggle switch to activate/deactive the search
exactMatch: true, // exact (true) or match (false)
compare : [ '', '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
compare : [ '', '=', '&gt;=', '&lt;=' ], // search values greater/less than selected value; overrides exactMatch
selected : 2, // zero-based index of compare starting selected value
// add any of the jQuery UI Spinner options here (http://api.jqueryui.com/spinner/)
@ -431,7 +432,7 @@
4 : function($cell, indx){
return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
cellText : 'Dates', // text added before the input
compare : [ '', '=', '>=', '<=' ], // search values greater/less than selected value; overrides exactMatch
compare : [ '', '=', '&gt;=', '&lt;=' ], // search values greater/less than selected value; overrides exactMatch
selected : 3, // zero-based index of compare starting selected value
// add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
@ -544,7 +545,8 @@
<pre class="prettyprint lang-javascript">$cell.closest('table').bind('filterFomatterUpdate', function(){
var savedSearch = $cell.find('input[type=hidden]').val();
// apply this saved search to your custom input
});</pre>
$.tablesorter.filter.formatterUpdated($cell, indx); // new v2.17.5
});</pre>As of <span class="version">v2.17.5</span>, you need to call <code>$.tablesorter.filter.formatterUpdated($cell, indx);</code> so the filter widget knows when all inputs have completed initialization, and fire the "filterInit" event.<br><br></li>
<li>If your selector needs a parsed value to work with, add the <code>filter-parsed</code> class name to the header cell above the filter, use this code to do that:
<pre class="prettyprint lang-javascript">$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');</pre>
</li>

4
docs/index.html
View File

@ -480,8 +480,8 @@
<li><a href="example-widget-filter-external-inputs.html">external inputs</a> (<span class="version">v2.14</span>; <span class="version updated">v2.15</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>)</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.2</span>).</li>
<li>formatter: <a href="example-widget-filter-formatter-select2.html">select2</a> (<span class="version updated">v2.16.0</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.17.5</span>)</li>
</ul>
</li>
<li>Grouping rows widget:

1
js/jquery.tablesorter.widgets-filter-formatter-select2.js
View File

@ -102,6 +102,7 @@ ts.filterFormatter.select2 = function($cell, indx, select2Def) {
val = val.replace(/[/()$^]/g, '').split('|');
$cell.find('.select2').select2('val', val);
updateSelect2();
ts.filter.formatterUpdated($cell, indx);
});
// has sticky headers?

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

@ -145,6 +145,7 @@ tsff = ts.filterFormatter = {
var val = tsff.updateCompare($cell, $input, o)[0];
$cell.find('.spinner').val( val );
updateSpinner({ value: val }, true);
ts.filter.formatterUpdated($cell, indx);
});
if (o.compare) {
@ -303,6 +304,7 @@ tsff = ts.filterFormatter = {
var val = tsff.updateCompare($cell, $input, o)[0];
$cell.find('.slider').slider('value', val );
updateSlider({ value: val }, false);
ts.filter.formatterUpdated($cell, indx);
});
if (o.compare) {
@ -447,6 +449,7 @@ tsff = ts.filterFormatter = {
// update slider from hidden input, in case of saved filters
c.$table.bind('filterFomatterUpdate', function(){
getRange();
ts.filter.formatterUpdated($cell, indx);
});
// on reset
@ -579,6 +582,7 @@ tsff = ts.filterFormatter = {
$cell.add($shcell).find('.date').datepicker( 'setDate', num || null );
setTimeout(function(){
date1Compare(true);
ts.filter.formatterUpdated($cell, indx);
}, 0);
});
@ -728,6 +732,7 @@ tsff = ts.filterFormatter = {
// give datepicker time to process
setTimeout(function(){
closeDate();
ts.filter.formatterUpdated($cell, indx);
}, 0);
});
@ -848,6 +853,7 @@ tsff = ts.filterFormatter = {
var val = tsff.updateCompare($cell, $input, o)[0] || o.value;
$cell.find('.number').val( ((val || '') + '').replace(/[><=]/g,'') );
updateNumber(false, true);
ts.filter.formatterUpdated($cell, indx);
});
if (o.compare) {
@ -968,6 +974,7 @@ tsff = ts.filterFormatter = {
var val = tsff.updateCompare($cell, $input, o)[0];
$cell.find('.range').val( val );
updateRange(val, false, true);
ts.filter.formatterUpdated($cell, indx);
});
if (o.compare) {
@ -1100,6 +1107,7 @@ tsff = ts.filterFormatter = {
// update slider from hidden input, in case of saved filters
c.$table.bind('filterFomatterUpdate', function(){
updateColor( $input.val(), true );
ts.filter.formatterUpdated($cell, indx);
});
// on reset

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

@ -572,8 +572,11 @@ ts.filter = {
}
c.$table.addClass('hasFilters');
// define searchTimer so using clearTimeout won't cause an undefined error
// define timers so using clearTimeout won't cause an undefined error
wo.searchTimer = null;
wo.filter_initTimer = null;
wo.filter_formatterCount = 0;
wo.filter_formatterInit = [];
$.extend( regex, {
child : new RegExp(c.cssChildRow),
@ -702,22 +705,49 @@ ts.filter = {
// trigger init after setTimeout to prevent multiple filterStart/End/Init triggers
setTimeout(function(){
if (!wo.filter_initialized) {
ts.filter.filterInitComplete(c);
}
}, 100);
});
// if filter widget is added after pager has initialized; then set filter init flag
if (c.pager && c.pager.initialized && !wo.filter_initialized) {
c.$table.trigger('filterFomatterUpdate');
setTimeout(function(){
ts.filter.filterInitComplete(c);
}, 100);
}
},
// $cell parameter, but not the config, is passed to the
// filter_formatters, so we have to work with it instead
formatterUpdated: function($cell, column) {
var wo = $cell.closest('table')[0].config.widgetOptions;
if (!wo.filter_initialized) {
// add updates by column since this function
// may be called numerous times before initialization
wo.filter_formatterInit[column] = 1;
}
},
filterInitComplete: function(c){
var wo = c.widgetOptions,
count = 0;
$.each( wo.filter_formatterInit, function(i, val) {
if (val === 1) {
count++;
}
});
clearTimeout(wo.filter_initTimer);
if (!wo.filter_initialized && count === wo.filter_formatterCount) {
// filter widget initialized
wo.filter_initialized = true;
c.$table.trigger('filterInit', c);
}
}, 1);
});
// if filter widget is added after pager has initialized; then set filter init flag
setTimeout(function(){
if (c.pager && c.pager.initialized && !wo.filter_initialized) {
} else if (!wo.filter_initialized) {
// fall back in case a filter_formatter doesn't call
// $.tablesorter.filter.formatterUpdated($cell, column), and the count is off
wo.filter_initTimer = setTimeout(function(){
wo.filter_initialized = true;
c.$table
.trigger('filterFomatterUpdate')
.trigger('filterInit', c);
c.$table.trigger('filterInit', c);
}, 500);
}
}, 1);
},
setDefaults: function(table, c, wo) {
var isArray, saved, indx,
@ -769,6 +799,7 @@ ts.filter = {
} else {
ffxn = ts.getColumnData( table, wo.filter_formatter, column );
if (ffxn) {
wo.filter_formatterCount++;
buildFilter = ffxn( c.$filters.eq(column), column );
// no element returned, so lets go find it
if (buildFilter && buildFilter.length === 0) {