1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 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.21.0</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.21.0).</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.21.0</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>
|
