mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
231 lines
7.6 KiB
HTML
231 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - Filter Formatter: select2 (beta)</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="js/jquery-latest.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
|
<script src="js/jquery-ui-latest.min.js"></script>
|
|
<link rel="stylesheet" href="../docs/css/jq.css">
|
|
<link href="../docs/css/prettify.css" rel="stylesheet">
|
|
<script src="../docs/js/prettify.js"></script>
|
|
<script src="../docs/js/docs.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="css/select2-3.4.6.min.css" rel="stylesheet">
|
|
<script src="js/select2-3.4.6.min.js"></script>
|
|
<script src="../js/jquery.tablesorter.widgets-filter-formatter-select2.js"></script>
|
|
|
|
<script id="js">$(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'];
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Filter Formatter: select2 (beta)</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
<div id="main">
|
|
|
|
<p></p>
|
|
<br>
|
|
|
|
<div id="root" class="accordion">
|
|
|
|
<h3><a href="#">Notes</a></h3>
|
|
<div>
|
|
<ul>
|
|
<li>Updated in <span class="version updated">v2.16.3</span> to allow adding an initial value to the select2 plugin.</li>
|
|
<li>This is a demo of the select2 filter formatter code.</li>
|
|
<li>It requires jQuery 1.7.2+, tablesorter <span class="version">2.16</span>+, the filter widget 2.16+ and <a href="http://ivaynberg.github.io/select2/">Select2</a> v3.4.6+ (not tested on older select2 versions)</li>
|
|
<li>This demo uses the new <a href="index.html#widget-filter-selectsource"><code>filter_selectSource</code></a> option which is only available in tablesorter <span class="version">v2.16</span>+</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3><a href="#">Options</a></h3>
|
|
<div>
|
|
There are only two filter formatter options, the rest are all <a href="http://ivaynberg.github.io/select2/#documentation">select2 plugin options</a> (defaults shown below):
|
|
<table class="tablesorter-blue">
|
|
<thead>
|
|
<tr><th>Option</th><th>Default</th><th class="sorter-false">Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><th colspan="3">Select2 FilterFormatter options</th></tr>
|
|
</tbody>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td>cellText</td>
|
|
<td>''</td>
|
|
<td>Text added within a <code><label></code> before the input.</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>match</td>
|
|
<td>true</td>
|
|
<td>Adds a "filter-match" class name to the header & modifies the search</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>value</td>
|
|
<td>[ ]</td>
|
|
<td>Set the initial select2 values within this array. These values are restored when the filters are reset.</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
<tbody>
|
|
<tr><th colspan="3">Select2 plugin (modified defaults)</th></tr>
|
|
</tbody>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td>multiple</td>
|
|
<td>true</td>
|
|
<td>Allow multiple selections. This option can be modified.</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>width</td>
|
|
<td>'100%'</td>
|
|
<td>Reduce this width if you add anything cellText, or the text and the input will be on separate lines.</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
This is an example of how to set these options:
|
|
<pre class="prettyprint lang-js">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
|
|
});
|
|
}
|
|
}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
</p>
|
|
|
|
<h1>Demo</h1>
|
|
<div id="demo"><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></div>
|
|
|
|
<h1>Header</h1>
|
|
<div>
|
|
<pre class="prettyprint lang-html"><!-- 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></pre>
|
|
</div>
|
|
|
|
<h1>HTML</h1>
|
|
<div id="html">
|
|
<pre class="prettyprint lang-html"></pre>
|
|
</div>
|
|
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-javascript"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|