mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
158 lines
6.5 KiB
HTML
158 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Search Type (example 2)</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.min.js"></script>
|
|
<link rel="stylesheet" href="css/jq.css">
|
|
<link href="css/prettify.css" rel="stylesheet">
|
|
<script src="js/prettify.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
<style>
|
|
/* override the vertical-align top in the blue theme */
|
|
.notes.tablesorter-blue tbody td { vertical-align: middle; }
|
|
</style>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
<script src="../js/widgets/widget-filter-type-insideRange.js"></script>
|
|
<script src="../js/parsers/parser-date-range.js"></script>
|
|
|
|
<script id="js">$(function() {
|
|
|
|
// call the tablesorter plugin
|
|
$("#table").tablesorter({
|
|
theme: 'blue',
|
|
widthFixed : true,
|
|
widgets: ["zebra", "filter"],
|
|
widgetOptions : {
|
|
filter_reset : '.reset',
|
|
// set to false because it is difficult to determine if a filtered
|
|
// row is already showing when looking at ranges
|
|
filter_searchFiltered : false
|
|
}
|
|
});
|
|
|
|
});</script>
|
|
|
|
<script>
|
|
$(function(){
|
|
$('button').on('click', function(){
|
|
var $this = $(this),
|
|
filters = [],
|
|
col = $(this).data('column'),
|
|
query = $(this).text();
|
|
filters[col] = query;
|
|
$('table').trigger('search', [ filters ]);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Custom Filter Widget Search Type (example 2)</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>In <span class="version updated">v2.20.2</span>
|
|
<ul>
|
|
<li>The "insideRange" function was updated to use the column parser and moved into a separate file "widget-filter-type-insideRange.js"</li>
|
|
<li>This change would allow the sorting of dates, if using it along with one of the <a href="example-parsers-date-range.html">date-range parsers</a> (added v2.20.2).</li>
|
|
</ul>
|
|
</li>
|
|
<li>This is another example of how to add a custom filter search type - see <a href="example-widget-filter-custom-search.html#how_to_add_custom_filter_types">this page</a> for details on how to add your own.</li>
|
|
<li>This "insideRange" search type does the following:
|
|
<ul>
|
|
<li>This search type was not included with the other <a href="example-widget-filter-custom-search.html#builtin_filters">built-in search types</a> as it might be a little slower than the other search types because it has a bit more calculation to do than the others.</li>
|
|
<li>It looks for a dash surrounded by spaces (<code> - </code>) within the filter before activating.</li>
|
|
<li>So if you look for just <button type="button" data-column="2">4</button> in the "Delivery" column, the exact match of 4 will still be included.</li>
|
|
<li>Test out some more examples:
|
|
<ul>
|
|
<li>Try <button type="button" data-column="2">7</button> or <button type="button" data-column="2">8</button> in the Delivery column</li>
|
|
<li><button type="button" data-column="3">$15.45</button> in the "Price Range" column.</li>
|
|
<li><button type="button" data-column="4">7/12/2014</button> in the "Date Range" column; this column is processed using the "date-range-mdy" parser (added <span class="version">v2.20.2</span>).</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>Entering a range (e.g. <button type="button" data-column="2">4 - 7</button> will switch the query to the <a href="example-widget-filter-custom-search.html#builtin_filters">range search type</a> which will <em>only look at the first number</em> of the range within each cell.</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<h1>Demo</h1>
|
|
Filters: <button type="button">Reset</button>
|
|
<table id="table" class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>Name</th>
|
|
<th>Delivery (days)</th>
|
|
<th>Price Range</th>
|
|
<th class="sorter-date-range-mdy">Date Range</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>1</td><td>Widget</td><td>2 - 10</td><td>$5.95 - $13.20</td><td>04/28/2014 - 07/13/2014</td></tr>
|
|
<tr><td>11</td><td>Doodad</td><td>1 - 4</td><td>$2.99 - $8.40</td><td>04/28/2014 - 05/13/2014</td></tr>
|
|
<tr><td>12</td><td>Whatchamacallit</td><td>3 - 7</td><td>$4.29 - $15.99</td><td>7/15/2014</td></tr>
|
|
<tr><td>15</td><td>Thingy</td><td>5 - 6</td><td>$9.99 - $13.20</td><td>07/12/2014 - 07/23/2014</td></tr>
|
|
<tr><td>21</td><td>Cube</td><td>2 - 7</td><td>$6.99 - $14.99</td><td>05/22/2014 - 05/23/2014</td></tr>
|
|
<tr><td>13</td><td>It</td><td>5 - 12</td><td>$15.89 - $18.22</td><td>8/12/2014 - 7/10/2014</td></tr>
|
|
|
|
<tr><td>5</td><td>Fred</td><td>20 - 30</td><td>$13.19 - $15.54</td><td>6/12/2014 - 6/14/2014</td></tr>
|
|
<tr><td>10</td><td>FuBar</td><td>4</td><td>$5.50</td><td>6/13/2014 - 6/22/2014</td></tr>
|
|
<tr><td>16</td><td>Otto</td><td>2 - 4</td><td>$6.30 - $14.19</td><td>5/10/2014 - 5/20/2014</td></tr>
|
|
<tr><td>21</td><td>Betsy</td><td>7</td><td>$5.67 - $8.25</td><td>6/2/2014 - 6/13/2014</td></tr>
|
|
<tr><td>18</td><td>Clyde</td><td>5 - 10</td><td>$11.20 - $15.45</td><td>6/13/2014</td></tr>
|
|
<tr><td>7</td><td>Brick</td><td>5 - 7</td><td>$12.00 - $14.30</td><td>7/2/2014 - 7/25/2014</td></tr>
|
|
<tr><td>9</td><td>Gadget</td><td>10 - 20</td><td>$7.09 - $13.20</td><td>5/23/2014 - 6/12/2014</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h1>Page Head</h1>
|
|
<div id="html">
|
|
<pre class="prettyprint lang-html"><!-- jQuery -->
|
|
<script src="js/jquery-latest.min.js"></script>
|
|
|
|
<!-- tablesorter -->
|
|
<link rel="stylesheet" href="../css/theme.blue.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
|
<!-- inside range filter type -->
|
|
<script src="../js/widgets/widget-filter-type-insideRange.js"></script>
|
|
<!-- parse date ranges -->
|
|
<script src="../js/parsers/parser-date-range.js"></script></pre>
|
|
</div>
|
|
|
|
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-javascript"></pre>
|
|
</div>
|
|
|
|
<div class="next-up">
|
|
<hr />
|
|
Next up: <a href="example-widget-filter-formatter-1.html">jQuery custom filter widget formatter (jQuery UI widgets) ››</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|