# tablesorter

## Filter Formatter: select2 (beta)

### Flexible client-side table sorting

Back to documentation

### Notes

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

### Options

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/widgets/widget-filter-formatter-select2.js"></script>

# HTML

# Javascript