231 lines
6.9 KiB
HTML
231 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - External Filters + select2</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
|
|
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.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>
|
|
|
|
<link rel="stylesheet" href="select2.css">
|
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.0/select2.min.js"></script>
|
|
<style>
|
|
.tablesorter-filter-row td button {
|
|
background-color: red;
|
|
color: white;
|
|
border: #555 1px solid;
|
|
}
|
|
#external_controls input {
|
|
width: 150px;
|
|
margin-left: 5px;
|
|
}
|
|
.selector {
|
|
width: 200px;
|
|
}
|
|
</style>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.jui.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
|
|
<script id="js">$(function(){
|
|
|
|
var $t = $('table')
|
|
.on('filterInit', function () {
|
|
|
|
var filters,
|
|
select2Column = 0,
|
|
select2TagColumn = 1,
|
|
$t = $(this),
|
|
$filterCells = $t.find('.tablesorter-filter-row').children(),
|
|
$ext = $('#external_controls'),
|
|
$extCells = $ext.find('td'),
|
|
startSearch = function(){
|
|
filters = [];
|
|
$extCells.each(function(i){
|
|
var v,
|
|
$this = $(this),
|
|
$item = $this.find('select, input');
|
|
// specific method for select2
|
|
if (i === select2Column) {
|
|
v = '/(' + ($this.find('.selector').select2('val') || []).join('$|') + '$)/';
|
|
} else if(i === select2TagColumn){
|
|
v = '/(' + ($this.find('.selectorTag').select2('val') || []).join('|') + ')/';
|
|
}
|
|
if (i !== select2Column) {
|
|
// search for numbers > value
|
|
// v = '>=' + $item.val();
|
|
}
|
|
filters[i] = v || $item.val() || '';
|
|
});
|
|
// start search
|
|
$.tablesorter.setFilters($t, filters, true);
|
|
};
|
|
|
|
// hide filter row completely
|
|
$t.find('.tablesorter-filter-row').hide();
|
|
|
|
// clone original select and turn it into a select2
|
|
// doing it this way because we can let the filter widget do most of the work
|
|
$filterCells.eq(select2Column)
|
|
.find('select')
|
|
.attr('multiple', 'multiple')
|
|
.addClass('selector')
|
|
.appendTo( $ext.find('.select2') );
|
|
// replace select with an input
|
|
$filterCells.eq(select2Column).html('<input type="search" class="tablesorter-filter">');
|
|
|
|
// removed first option (it's just a placeholder)
|
|
$ext.find('.selector').find('option:first').remove();
|
|
// set up select2 input
|
|
$ext.find('.selector').select2({
|
|
placeholder : 'AlphaNumeric'
|
|
});
|
|
|
|
|
|
// /******* Select2 Tag Cloud ********/
|
|
// as with above AlphaNumeric filter get the option values from original select
|
|
var optionValues = [];
|
|
$filterCells.eq(select2TagColumn).find('select option').each(function() {
|
|
optionValues.push($(this).text());
|
|
});
|
|
|
|
// removed first option (it's just a placeholder)
|
|
optionValues = optionValues.slice(1);
|
|
|
|
//Create a new hidden input for select2 tag cloud and append it to its external filter cell
|
|
var $selectInput = $('<input type="hidden" class="selectorTag" style="width:200px"/>')
|
|
.appendTo( $ext.find('.select2tag') );
|
|
|
|
//Replace the original select filter with a search input
|
|
$filterCells.eq(select2TagColumn).html('<input type="search" class="tablesorter-filter">');
|
|
|
|
// set up select2 tag cloud input
|
|
$selectInput.select2({
|
|
tags : optionValues,
|
|
tokenSeparators : [","],
|
|
placeholder : 'AlphaNumeric Tag'
|
|
});
|
|
|
|
// turn off built-in filter-select
|
|
$t.find('.filter-select').removeClass('filter-select') // turn off filter select
|
|
this.config.widgetOptions.filter_functions[select2Column] = null;
|
|
this.config.widgetOptions.filter_functions[select2TagColumn] = null;
|
|
|
|
// input changes trigger a new search
|
|
$ext.find('select, input').on('change', function () {
|
|
startSearch();
|
|
});
|
|
|
|
})
|
|
.tablesorter({
|
|
theme: 'jui',
|
|
headerTemplate: '{content}{icon}',
|
|
widgets: ['zebra', 'uitheme', 'filter']
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>External Filters + select2</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
<div id="main">
|
|
|
|
<p class="tip">
|
|
<em>NOTE!</em>
|
|
<ul>
|
|
<li>External filter using <a href="http://ivaynberg.github.io/select2/">Select2</a> plugin.</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<h1>Demo</h1>
|
|
<br>
|
|
|
|
<table id="external_controls">
|
|
<tbody>
|
|
<tr>
|
|
<td class="select2">filters: </td>
|
|
<td class="select2tag"></td>
|
|
<td>
|
|
<input type="search" placeholder="num" />
|
|
</td>
|
|
<td>
|
|
<input type="search" placeholder="anim" />
|
|
</td>
|
|
<td>
|
|
<input type="search" placeholder="sites" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<th class="filter-select">AlphaNumeric</th>
|
|
<th class="filter-select">AlphaNumeric Tag</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>abc 2</td><td>abc 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>abc 10</td><td>abc 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>
|
|
|
|
<h1>HTML</h1>
|
|
<div>
|
|
<pre class="prettyprint lang-html"><table id="external_controls">
|
|
<tbody>
|
|
<tr>
|
|
<td class="select2">filters: </td>
|
|
<td class="select2tag"></td>
|
|
<td>
|
|
<input type="search" placeholder="num" />
|
|
</td>
|
|
<td>
|
|
<input type="search" placeholder="anim" />
|
|
</td>
|
|
<td>
|
|
<input type="search" placeholder="sites" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></pre>
|
|
</div>
|
|
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-javascript"></pre>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|