• Updated in v2.19.0 to properly escape regexp characters. See issue #796 for details.
  • 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+

Demo

AlphaNumeric (match)
AlphaNumeric (exact; only available)
Numeric
Animals
Sites
  • No matches found
  • No matches found
  • No matches found
  • No matches found
  • No matches found
  • No matches found
abc 123abc 12310Koalahttp://www.google.com
abc 1abc 134Oxhttp://www.yahoo.com
abc 9abc 910Girafeehttp://www.facebook.com
zyx 24zyx 2467Bisonhttp://www.whitehouse.gov/
abc 11abc 113Chimphttp://www.ucla.edu/
def 2def 256Elephanthttp://www.wikipedia.org/
abc 9abc 975Lionhttp://www.nytimes.com/
def 10def 1087Zebrahttp://www.google.com
zyx 1zyx 199Koalahttp://www.mit.edu/
zyx 12zyx 120Llamahttp://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/widgets/widget-filter-formatter-select2.js"></script>

HTML

<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>

Javascript

$(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',
// 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'];
}
}
}

});

});