NOTE!
- 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)
- There are only two filter formatter options, the rest are all select2 options (defaults shown below):
// select2 filter formatter options cellText : '', // Text (wrapped in a label element) match : true, // adds "filter-match" to header & modifies search // ANY select2 options can be include below (showing default settings for this formatter code) multiple : true, // allow multiple selections width : '100%' // reduce this width if you add cellText
- This demo uses the new
filter_selectSourceoption which is only available in tablesorter v2.16+
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="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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>