mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
150 lines
6.9 KiB
HTML
150 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget Any Match</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/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://ajax.googleapis.com/ajax/libs/jqueryui/1.7/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>
|
|
|
|
<!-- 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 id="js">$(function() {
|
|
|
|
var $table = $('table').tablesorter({
|
|
theme: 'blue',
|
|
widgets: ["zebra", "filter"],
|
|
widgetOptions : {
|
|
// if true overrides default find rows behaviours and if any column matches query it returns that row
|
|
filter_anyMatch : true,
|
|
filter_columnFilters: false,
|
|
filter_reset: '.reset'
|
|
}
|
|
});
|
|
|
|
// Target the $('.search') input using built in functioning
|
|
// this binds to the search using "search" and "keyup"
|
|
// Allows using filter_liveSearch or delayed search &
|
|
// pressing escape to cancel the search
|
|
$.tablesorter.filter.bindSearch( $table, $('.search') );
|
|
|
|
// Basic search binding, alternate to the above
|
|
// bind to search - pressing enter and clicking on "x" to clear (Webkit)
|
|
// keyup allows dynamic searching
|
|
/*
|
|
$(".search").bind('search keyup', function (e) {
|
|
$('table').trigger('search', [ [this.value] ]);
|
|
});
|
|
*/
|
|
|
|
});</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Filter Widget Any Match</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>This is a demo of the <code>filter_anyMatch</code> option (<span class="version">v2.13.3</span>).</li>
|
|
<li>This method has limitations in that it does not support all of the per column search features! So, at this time, the following types of queries are not allowed as the results will cause confusion:
|
|
<ul>
|
|
<li>Search operators - A search for values equal, greater or less than values (<code>> >= <= <</code>) is not allowed because tables that contain both numbers and text (in separate columns). For example:
|
|
<pre class="prettyprint lang-javascript">"Fred" > "1" // true*
|
|
"Fred" < "10" // false
|
|
"Fred" > 1 // false (numeric comparisons occur with parsed table data)
|
|
"Fred" > 1 // false
|
|
"Fred" < 10 // false</pre>* For comparisons, letters have a greater <a href="http://en.wikipedia.org/wiki/Ascii#ASCII_printable_characters">ASCII value</a> than numbers.
|
|
</li>
|
|
<li>Range query - A search for any number range (<code>1 - 10</code>) is not allowed because, if any columns contain text, then no rows will result. The examples are the same as the search operators examples above.</li>
|
|
<li>Not Match query - A search for not matches (<code>!a</code>) is not allowed because tables that contain both numbers and text (in separate columns) will always show all rows. For example:
|
|
<pre class="prettyprint lang-javascript">"Frank".search("a") // 2 (a match, so this row "may" be hidden)
|
|
"Fred".search("a") // -1 (a not match! so this row will always show)
|
|
"25".search("a") // -1 (a not match! so this row will always show)
|
|
"1/1/2014".search("a") // -1 (a not match! so this row will always show)</pre>
|
|
</li>
|
|
<li>Allowed filters include plain text matching, fuzzy search (<code>~</code>), exact match (<code>"</code>), wild card matches( <code>?</code> or <code>*</code>), regex (<code>/\d/g</code>), and logical and (<code>a && b</code>)/or (<code>a|b</code>) matches.</li>
|
|
</ul>
|
|
<li>Setting this option should work properly with or without the column filters. The only issue you would have is if you triggered a search on the table using an array with undefined or null array values, like this:
|
|
<pre class="prettyprint lang-javascript">// apply "2?%" filter to the fifth column (zero-based index)
|
|
var columns = [];
|
|
columns[5] = '2?%';
|
|
// anyMatch will kick in on undefined column filters,
|
|
// unless the array looks like this: columns = [ '', '', '', '', '', '2?%' ]
|
|
$('table').trigger('search', [ columns ]);</pre></li>
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<h1>Demo</h1>
|
|
|
|
<div id="demo">
|
|
<input class="search" type="search">
|
|
<button type="button" class="reset">Reset Search</button> <!-- targeted by the "filter_reset" option -->
|
|
|
|
<table class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<th>Rank</th>
|
|
<th>First Name</th>
|
|
<th>Last Name</th>
|
|
<th>Age</th>
|
|
<th>Total</th>
|
|
<th>Discount</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>1</td><td>Philip Aaron</td><td>Johnson Sr Esq</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2004 7:22 AM</td></tr>
|
|
<tr><td>11</td><td>Aaron</td><td>Hibert</td><td>12</td><td>$2.99</td><td>5%</td><td>Aug 21, 2009 12:21 PM</td></tr>
|
|
<tr><td>12</td><td>Brandon Clark</td><td>Henry Jr</td><td>51</td><td>$42.29</td><td>18%</td><td>Oct 13, 2000 1:15 PM</td></tr>
|
|
<tr><td>111</td><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
|
|
<tr><td>21</td><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
|
|
<tr><td>013</td><td>Clark</td><td>Kent Sr.</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
|
|
<tr><td>005</td><td>Bruce</td><td>Almighty Esq</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2021 9:12 AM</td></tr>
|
|
<tr><td>10</td><td>Alex</td><td>Dumass</td><td>13</td><td>$5.29</td><td>4%</td><td>Jan 8, 2012 5:11 PM</td></tr>
|
|
<tr><td>16</td><td>Jim</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2004 11:23 AM</td></tr>
|
|
<tr><td>166</td><td>Bruce Lee</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
|
|
<tr><td>100</td><td>Brenda Lee</td><td>McMasters</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2010 7:23 PM</td></tr>
|
|
<tr><td>55</td><td>Dennis</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2001 1:12 PM</td></tr>
|
|
<tr><td>9</td><td>Martha</td><td>delFuego</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2011 10:55 AM</td></tr>
|
|
</tbody>
|
|
</table></div>
|
|
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="prettyprint lang-javascript"></pre>
|
|
</div>
|
|
|
|
<h1>HTML</h1>
|
|
<div id="html">
|
|
<pre class="prettyprint lang-html"></pre>
|
|
</div>
|
|
|
|
<div class="next-up">
|
|
<hr />
|
|
Next up: <a href="example-widget-filter-custom.html">jQuery custom filter widget ››</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|