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

Added Select2 version 4.0.2 filter formatter. Includes Select2v4.0.2 js and css min files.

Browse Source
This commit is contained in:
Seth Kania 2019-03-26 13:18:02 -04:00
parent 547933815a
commit 418045ce68
4 changed files with 411 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/css/select2-4.0.2.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

228
docs/example-widget-filter-formatter-select2-v4.html Normal file
View File

@ -0,0 +1,228 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - Filter Formatter: select2 v4 (beta)</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="../docs/css/jq.css">
<link href="../docs/css/prettify.css" rel="stylesheet">
<script src="../docs/js/prettify.js"></script>
<script src="../docs/js/docs.js"></script>
<!-- Tablesorter: required -->
<link href="../css/theme.blue.css" rel="stylesheet">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<!-- Select2 code -->
<link href="css/select2-4.0.2.min.css" rel="stylesheet">
<script src="js/select2-4.0.2.min.js"></script>
<script src="../js/widgets/widget-filter-formatter-select2v4.js"></script>
<script id="js">$(function() {
$('.tablesorter').tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'stickyHeaders', 'filter'],
widgetOptions : {
// Use the $.tablesorter.storage utility to save the most recent filters
filter_saveFilters : true,
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
filter_cssFilter: "form-control",
// 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: ', // 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 // 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'];
}
}
}
});
});
</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Filter Formatter: select2 V4 (beta)</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p></p>
<br>
<div id="root" class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
There are only two filter formatter options, the rest are all <a href="http://ivaynberg.github.io/select2/#documentation">select2 plugin options</a> (defaults shown below):
<table class="tablesorter-blue">
<thead>
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
</thead>
<tbody>
<tr><th colspan="3">Select2 FilterFormatter options</th></tr>
</tbody>
<tbody>
<tr>
<td>cellText</td>
<td>''</td>
<td>Text added within a <code>&lt;label&gt;</code> before the input.</td>
</tr>
<tr>
<td>match</td>
<td>true</td>
<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>
</tbody>
<tbody>
<tr>
<td>multiple</td>
<td>true</td>
<td>Allow multiple selections. This option can be modified.</td>
</tr>
<tr>
<td>width</td>
<td>'100%'</td>
<td>Reduce this width if you add anything cellText, or the text and the input will be on separate lines.</td>
</tr>
</tbody>
</table>
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) {
return $.tablesorter.filterFormatter.select2( $cell, indx, {
// *** 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)
multiple : true, // allow multiple selections
width : '100%' // reduce this width if you add cellText
});
}
}</pre>
</div>
</div>
<p></p>
<h1>Demo</h1>
<div id="demo"><button type="button" class="reset">Reset Search</button>
<table class="tablesorter">
<thead>
<tr>
<!-- filter-match is automatically added by select2 "match" option -->
<th>AlphaNumeric (match)</th>
<th class="filter-onlyAvail">AlphaNumeric (exact; only available)</th>
<th>Numeric</th>
<th>Animals</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr><td>abc 123</td><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
<tr><td>abc 1</td><td>abc 1</td><td>34</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
<tr><td>abc 9</td><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
<tr><td>zyx 24</td><td>zyx 24</td><td>67</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
<tr><td>abc 11</td><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
<tr><td>def 2</td><td>def 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
<tr><td>abc 9</td><td>abc 9</td><td>75</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
<tr><td>def 10</td><td>def 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>
<tr><td>zyx 1</td><td>zyx 1</td><td>99</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
<tr><td>zyx 12</td><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
</tbody>
</table></div>
<h1>Header</h1>
<div>
<pre class="prettyprint lang-html">&lt;!-- jQuery --&gt;
&lt;script src=&quot;js/jquery-latest.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Tablesorter: required --&gt;
&lt;link href=&quot;../css/theme.blue.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;
&lt;!-- Select2 code --&gt;
&lt;link href=&quot;http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;script src=&quot;http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/widgets/widget-filter-formatter-select2.js&quot;&gt;&lt;/script&gt;</pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
</div>
</body>
</html>

2
docs/js/select2-4.0.2.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

180
js/widgets/widget-filter-formatter-select2v4.js Normal file
View File

@ -0,0 +1,180 @@
;(function($) {
'use strict';
var ts = $.tablesorter || {};
ts.filterFormatter = ts.filterFormatter || {};
/************************\
Select2 V4 Filter Formatter
\************************/
ts.filterFormatter.select2 = function($cell, indx, select2Def) {
var o = $.extend({
// 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%'
}, select2Def );
var arry, data,
// add class to $cell since it may point to a removed DOM node
// after a "refreshWidgets"; see #1237
c = $cell.addClass('select2col' + indx).closest('table')[0].config,
wo = c.widgetOptions,
// Add a hidden input to hold the range values
$input = $('<input class="filter" type="hidden">')
.appendTo($cell)
// hidden filter update namespace trigger by filter widget
.bind('change' + c.namespace + 'filter', function() {
var val = convertRegex(this.value);
c.$table.find('.select2col' + indx + ' .select2').select2().val(val);
updateSelect2();
}),
$header = c.$headerIndexed[indx],
onlyAvail = $header.hasClass(wo.filter_onlyAvail),
flags = wo.filter_ignoreCase ? 'i' : '',
matchPrefix = o.match ? '' : '^', // if match is defined, search the word from start to finish
matchSuffix = o.match ? '' : '$',
convertRegex = function(val) {
// value = '/(^x$|^y$)/' => ['x','y']
return val
.replace(/^\/\(\^?/, '')
.replace(/\$\|\^/g, '|')
.replace(/\$?\)\/i?$/g, '')
// unescape special regex characters
.replace(/\\/g, '')
.split('|');
},
// this function updates the hidden input and adds the current values to the header cell text
updateSelect2 = function() {
var arry = false,
v = c.$table.find('.select2col' + indx + ' .select2').val() || o.value || '';
if ($.isArray(v)) {
arry = true;
v = v.join('\u0000');
}
// escape special regex characters (http://stackoverflow.com/a/9310752/145346)
// v = v.replace(/[-[\]{}()*+?.,/\\^$|#\s]/g, '\\$&');
// convert string back into an array
if (arry) {
v = v.split('\u0000');
}
if (!ts.isEmptyObject($cell.find('.select2').data())) {
$input.val(
$.isArray(v) && v.length && v.join('') !== '' ?
'/(' + matchPrefix + (v || []).join(matchSuffix + '|' + matchPrefix) + matchSuffix + ')/' + flags :
'').trigger('search');
setTimeout(function() {
if (v + '' !== '') {
if (v.indexOf(',') >= 0) {
v = v.join('\u0000');
$cell.find('select.select2').select2().val(v.split(','));
} else {
$cell.find('select.select2').select2().val(v);
}
}
}, 1);
// update sticky header cell
if (c.widgetOptions.$sticky) {
c.widgetOptions.$sticky.find('.select2col' + indx + ' .select2').select2().val(v);
}
}
},
// get options from table cell content or filter_selectSource (v2.16)
updateOptions = function() {
data = [];
arry = ts.filter.getOptionSource(c.$table[0], indx, onlyAvail) || [];
// build select2 data option
$.each(arry, function(i, v) {
// getOptionSource returns { parsed: "value", text: "value" } in v2.24.4
data.push({ id: '' + v.text, text: v.text });
});
o.data = data;
};
// get filter-match class from option
$header.toggleClass('filter-match', o.match);
if (o.cellText) {
$cell.prepend('<label>' + o.cellText + '</label>');
}
// don't add default in table options if either ajax or
// data options are already defined
if (!(o.ajax && !$.isEmptyObject(o.ajax)) && !o.data) {
updateOptions();
c.$table.bind('filterEnd', function() {
updateOptions();
c.$table
.find('.select2col' + indx)
.add(c.widgetOptions.$sticky && c.widgetOptions.$sticky.find('.select2col' + indx))
.find('.select2').select2(o);
});
}
// add a select2 input!
$('<select class="select2 select2-' + indx + '" />')
.appendTo($cell)
.select2(o)
.val(o.value)
.bind('change', function() {
updateSelect2();
});
// update select2 from filter hidden input, in case of saved filters
c.$table.bind('filterFomatterUpdate', function() {
// value = '/(^x$|^y$)/' => 'x,y'
var val = convertRegex(c.$table.data('lastSearch')[indx] || '');
$cell = c.$table.find('.select2col' + indx);
val = val + '';
if (val.indexOf(',') >= 0) {
// if the hidden val from input is comma separated, add the values to Select2's select as an array
$cell.find('select.select2').val(val.split(','));
} else {
// if the hidden val from input is a single value, just add the value
$cell.find('select.select2').val(val);
}
$cell.find('select.select2').trigger('change');
updateSelect2();
ts.filter.formatterUpdated($cell, indx);
});
// has sticky headers?
c.$table.bind('stickyHeadersInit', function() {
var $shcell = c.widgetOptions.$sticky.find('.select2col' + indx).empty();
// add a select2!
$('<select class="select2 select2-' + indx + '">')
.appendTo($shcell)
.select2(o)
.val(o.value)
.bind('change', function() {
c.$table.find('.select2col' + indx)
.find('.select2')
.select2().val($(this).val());
updateSelect2();
});
if (o.cellText) {
$shcell.prepend('<label>' + o.cellText + '</label>');
}
});
// on reset
c.$table.bind('filterReset', function() {
c.$table.find('.select2col' + indx).find('.select2').select2().val(o.value);
setTimeout(function() {
updateSelect2();
}, 0);
});
updateSelect2();
return $input;
};
})(jQuery);