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

Select2 filterFormatter now allows initial settings. Fixes #598

Browse Source
This commit is contained in:
Mottie 2014-04-29 11:44:14 -05:00
parent 3b5161a5ba
commit cb37758ca2
2 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/example-widget-filter-formatter-select2.html
View File

@ -38,24 +38,29 @@
filter_reset : 'button.reset',
// add custom selector elements to the filter row
filter_formatter : {
// Alphanumeric (match)
0 : function($cell, indx){
return $.tablesorter.filterFormatter.select2( $cell, indx, {
match : true, // adds "filter-match" to header
cellText : 'Match: ',
width: '85%'
match : true, // adds "filter-match" to header
cellText : 'Match: ', // Cell text
width: '85%', // adjusted width to allow for cell text
value: ['abc', 'def'] // initial values
});
},
// Alphanumeric (exact)
1 : function($cell, indx){
return $.tablesorter.filterFormatter.select2( $cell, indx, {
match : false // adds "filter-match" to header
match : false // exact match only
});
}
},
// option added in v2.16.0
filter_selectSource : {
// Alphanumeric match (prefix only)
// added as select2 options (you could also use select2 data option)
0 : function(table, column) {
return ['abc', 'def', 'zyx'];
}
@ -85,6 +90,7 @@
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>Updated in <span class="version updated">v2.16.3</span> to allow adding an initial value to the select2 plugin.</li>
<li>This is a demo of the select2 filter formatter code.</li>
<li>It requires jQuery 1.7.2+, tablesorter <span class="version">2.16</span>+, the filter widget 2.16+ and <a href="http://ivaynberg.github.io/select2/">Select2</a> v3.4.6+ (not tested on older select2 versions)</li>
<li>This demo uses the new <a href="index.html#widget-filter-selectsource"><code>filter_selectSource</code></a> option which is only available in tablesorter <span class="version">v2.16</span>+</li>
@ -115,6 +121,12 @@
<td>Adds a "filter-match" class name to the header &amp; modifies the search</td>
</tr>
<tr>
<td>value</td>
<td>[ ]</td>
<td>Set the initial select2 values within this array. These values are restored when the filters are reset.</td>
</tr>
</tbody>
<tbody>
<tr><th colspan="3">Select2 plugin (modified defaults)</th></tr>
@ -137,7 +149,7 @@
</tbody>
</table>
This is an example of how to set this option:
This is an example of how to set these options:
<pre class="prettyprint lang-js">filter_formatter : {
// default settings on first column
0 : function($cell, indx){
@ -145,6 +157,7 @@
// *** select2 filter formatter options ***
cellText : '', // Text (wrapped in a label element)
match : true, // adds "filter-match" to header & modifies search
value : [], // initial select2 values
// *** ANY select2 options can be included below ***
// (showing default settings for this formatter code)

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

@ -1,4 +1,4 @@
/*! Filter widget formatter functions - updated 4/22/2014 (v2.16.1-beta)
/*! Filter widget formatter functions - updated 4/29/2014 (v2.16.3)
* requires: jQuery 1.7.2+, tableSorter 2.16+, filter widget 2.16+ and select2 v3.4.6+ plugin
*/
/*jshint browser:true, jquery:true, unused:false */
@ -17,6 +17,7 @@ ts.filterFormatter.select2 = function($cell, indx, select2Def) {
// select2 filter formatter options
cellText : '', // Text (wrapped in a label element)
match : true, // adds "filter-match" to header
value : '',
// include ANY select2 options below
multiple : true,
width : '100%'
@ -31,21 +32,23 @@ ts.filterFormatter.select2 = function($cell, indx, select2Def) {
// hidden filter update namespace trigger by filter widget
.bind('change' + c.namespace + 'filter', function(){
var val = this.value;
val = val.replace(/[/()$]/g, '').split('|');
updateSelect2(val);
val = val.replace(/[/()$^]/g, '').split('|');
$cell.find('.select2').select2('val', val);
updateSelect2();
}),
$header = c.$headers.filter('[data-column="' + indx + '"]:last'),
onlyAvail = $header.hasClass(wo.filter_onlyAvail),
$shcell = [],
match = o.match ? '' : '$',
matchPrefix = o.match ? '' : '^',
matchSuffix = o.match ? '' : '$',
// this function updates the hidden input and adds the current values to the header cell text
updateSelect2 = function(v, notrigger) {
v = typeof v === "undefined" || v === '' ? $cell.find('.select2').select2('val') || o.value || '' : v || '';
updateSelect2 = function() {
var v = $cell.find('.select2').select2('val') || o.value || '';
$input
// add equal to the beginning, so we filter exact numbers
.val( $.isArray(v) && v.length ? '/(' + (v || []).join(match + '|') + match + ')/' : '' )
.trigger( notrigger ? '' : 'search' ).end()
// add regex, so we filter exact numbers
.val( $.isArray(v) && v.length && v.join('') !== '' ? '/(' + matchPrefix + (v || []).join(matchSuffix + '|' + matchPrefix) + matchSuffix + ')/' : '' )
.trigger('search').end()
.find('.select2').select2('val', v);
// update sticky header cell
if ($shcell.length) {
@ -94,11 +97,11 @@ ts.filterFormatter.select2 = function($cell, indx, select2Def) {
// update select2 from filter hidden input, in case of saved filters
c.$table.bind('filterFomatterUpdate', function(){
// value = '/(x$|y$)/' => 'x,y'
// value = '/(^x$|^y$)/' => 'x,y'
var val = c.$table.data('lastSearch')[indx] || '';
val = val.replace(/[/()$]/g, '').split('|');
val = val.replace(/[/()$^]/g, '').split('|');
$cell.find('.select2').select2('val', val);
updateSelect2(val, true);
updateSelect2();
});
// has sticky headers?