2014-04-20 23:34:27 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2016-01-10 22:24:57 +00:00
< title > jQuery tablesorter 2.0 - Filter Formatter: select2 (beta)< / title >
2014-04-20 23:34:27 +00:00
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2014-04-20 23:34:27 +00:00
<!-- Demo stuff -->
2014-05-21 22:09:23 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
2015-02-13 12:56:45 +00:00
< script src = "js/jquery-ui.min.js" > < / script >
2014-04-20 23:34:27 +00:00
< 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 -->
2014-05-21 22:09:23 +00:00
< link href = "css/select2-3.4.6.min.css" rel = "stylesheet" >
< script src = "js/select2-3.4.6.min.js" > < / script >
2015-02-13 03:10:38 +00:00
< script src = "../js/widgets/widget-filter-formatter-select2.js" > < / script >
2014-04-20 23:34:27 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2014-04-29 00:19:59 +00:00
$('.tablesorter').tablesorter({
2014-04-20 23:34:27 +00:00
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',
// add custom selector elements to the filter row
filter_formatter : {
2014-04-29 16:44:14 +00:00
2014-04-20 23:34:27 +00:00
// Alphanumeric (match)
0 : function($cell, indx){
return $.tablesorter.filterFormatter.select2( $cell, indx, {
2014-04-29 16:44:14 +00:00
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
2014-04-20 23:34:27 +00:00
});
},
2014-04-29 16:44:14 +00:00
2014-04-20 23:34:27 +00:00
// Alphanumeric (exact)
1 : function($cell, indx){
return $.tablesorter.filterFormatter.select2( $cell, indx, {
2014-04-29 16:44:14 +00:00
match : false // exact match only
2014-04-20 23:34:27 +00:00
});
}
},
2014-04-29 16:44:14 +00:00
2014-04-20 23:34:27 +00:00
// option added in v2.16.0
filter_selectSource : {
// Alphanumeric match (prefix only)
2014-04-29 16:44:14 +00:00
// added as select2 options (you could also use select2 data option)
2014-04-20 23:34:27 +00:00
0 : function(table, column) {
return ['abc', 'def', 'zyx'];
}
}
}
});
});
< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Filter Formatter: select2 (beta)< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2014-04-29 00:19:59 +00:00
< p > < / p >
< br >
< div id = "root" class = "accordion" >
< h3 > < a href = "#" > Notes< / a > < / h3 >
< div >
< ul >
2015-02-07 06:46:44 +00:00
< li > Updated in < span class = "version updated" > v2.19.0< / span > to properly escape regexp characters. See < a href = "https://github.com/Mottie/tablesorter/issues/796" > issue #796< / a > for details.< / li >
2014-04-29 16:44:14 +00:00
< li > Updated in < span class = "version updated" > v2.16.3< / span > to allow adding an initial value to the select2 plugin.< / li >
2014-04-29 00:19:59 +00:00
< 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 >
< / 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 > < label> < / code > before the input.< / td >
< / tr >
< tr >
< td > match< / td >
< td > true< / td >
< td > Adds a "filter-match" class name to the header & modifies the search< / td >
< / tr >
2014-04-29 16:44:14 +00:00
< 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 >
2014-04-29 00:19:59 +00:00
< / 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 >
2014-04-29 16:44:14 +00:00
This is an example of how to set these options:
2014-04-29 00:19:59 +00:00
< 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
2014-04-29 16:44:14 +00:00
value : [], // initial select2 values
2014-04-29 00:19:59 +00:00
// *** 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 >
2016-01-10 22:24:57 +00:00
< p > < / p >
2014-04-20 23:34:27 +00:00
< h1 > Demo< / h1 >
2016-07-08 19:08:21 +00:00
< div id = "demo" > < button type = "button" class = "reset" > Reset Search< / button >
2014-04-20 23:34:27 +00:00
< 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" > < !-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src=" js/jquery-latest.min.js" > < /script>
2014-04-20 23:34:27 +00:00
< !-- 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=" http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.css" rel=" stylesheet" >
< script src=" http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.js" > < /script>
2015-02-13 03:10:38 +00:00
< script src=" ../js/widgets/widget-filter-formatter-select2.js" > < /script> < / pre >
2014-04-20 23:34:27 +00:00
< / 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 >