Notes

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

Options

There are only two filter formatter options, the rest are all select2 plugin options (defaults shown below):
OptionDefaultDescription
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 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/jquery.tablesorter.widgets-filter-formatter-select2.js"></script>

HTML


	

Javascript