- Updated in v2.16.3 to allow adding an initial value to the select2 plugin.
- This is a demo of the select2 filter formatter code.
- It requires jQuery 1.7.2+, tablesorter 2.16+, the filter widget 2.16+ and Select2 v3.4.6+ (not tested on older select2 versions)
- This demo uses the new
filter_selectSource
option which is only available in tablesorter v2.16+
There are only two filter formatter options, the rest are all
select2 plugin options (defaults shown below):
Option | Default | Description |
Select2 FilterFormatter options |
cellText |
'' |
Text added within a <label> before the input. |
match |
true |
Adds a "filter-match" class name to the header & modifies the search |
value |
[ ] |
Set the initial select2 values within this array. These values are restored when the filters are reset. |
Select2 plugin (modified defaults) |
multiple |
true |
Allow multiple selections. This option can be modified. |
width |
'100%' |
Reduce this width if you add anything cellText, or the text and the input will be on separate lines. |
This is an example of how to set these options:
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
});
}
}
Demo
AlphaNumeric (match) |
AlphaNumeric (exact; only available) |
Numeric |
Animals |
Sites |
abc 123 | abc 123 | 10 | Koala | http://www.google.com |
abc 1 | abc 1 | 34 | Ox | http://www.yahoo.com |
abc 9 | abc 9 | 10 | Girafee | http://www.facebook.com |
zyx 24 | zyx 24 | 67 | Bison | http://www.whitehouse.gov/ |
abc 11 | abc 11 | 3 | Chimp | http://www.ucla.edu/ |
def 2 | def 2 | 56 | Elephant | http://www.wikipedia.org/ |
abc 9 | abc 9 | 75 | Lion | http://www.nytimes.com/ |
def 10 | def 10 | 87 | Zebra | http://www.google.com |
zyx 1 | zyx 1 | 99 | Koala | http://www.mit.edu/ |
zyx 12 | zyx 12 | 0 | Llama | http://www.nasa.gov/ |
Header
<!-- jQuery -->
<script src="js/jquery-latest.min.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="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>
<script src="../js/jquery.tablesorter.widgets-filter-formatter-select2.js"></script>
HTML
Javascript