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
<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'];
}
}
}
});
});