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


There are only two filter formatter options, the rest are all select2 plugin options (defaults shown below):
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


AlphaNumeric (match) AlphaNumeric (exact; only available) Numeric Animals Sites
abc 123abc 12310Koala
abc 1abc 134Ox
abc 9abc 910Girafee
zyx 24zyx 2467Bison
abc 11abc 113Chimp
def 2def 256Elephant
abc 9abc 975Lion
def 10def 1087Zebra
zyx 1zyx 199Koala
zyx 12zyx 120Llama


<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>

<!-- Tablesorter: required -->
<link href="../css/" rel="stylesheet">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>

<!-- Select2 code -->
<link href="" rel="stylesheet">
<script src=""></script>
<script src="../js/widgets/widget-filter-formatter-select2.js"></script>