Skip to content

Feature Request to Issue filter_searchTrigger #1522 #1546

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CiTRO33 wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Feature Request to Issue filter_searchTrigger #1522 #1546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8f4dd31
Update widget-filter.js
CiTRO33 May 9, 2018
77cb815
Update widget-filter.js
CiTRO33 May 9, 2018
37db582
New Option filter_searchTrigger
CiTRO33 May 9, 2018
d28dd21
Update widget-filter.js
CiTRO33 May 9, 2018
abaff4b
filter_searchTrigger
CiTRO33 May 10, 2018
8a06d32
Merge branch 'master' of https://github.com/Mottie/tablesorter
CiTRO33 Dec 2, 2019
3ccc4e2
added Demo/Docs/Format
CiTRO33 Dec 2, 2019
7d58c8d
search event is always triggered
CiTRO33 Dec 2, 2019
5a98bf9
include search event als default to use select2
CiTRO33 Dec 19, 2019
d88d010
Revert "include search event als default to use select2"
CiTRO33 Dec 19, 2019
4ec8789
include search event as default value for select2
CiTRO33 Dec 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
392 changes: 392 additions & 0 deletions docs/example-widget-filter-search-trigger.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,392 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>jQuery tablesorter 2.0 - searchTrigger Filter Widget Functions</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>

<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/widgets/widget-storage.js"></script>
<script src="../js/widgets/widget-filter.js"></script>

<script id="js">$(function () {

// call the tablesorter plugin
$(".table_ctrl_enter").tablesorter({
theme: 'blue',

// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
widgetOptions: {
// livesearch must set to false, we want to control the search trigger
filter_liveSearch: false,
// possibles values
// Number: 13,9 or internal constants: $.tablesorter.keyCodes
// String: "blur", "search", "change", "keypress" (events)
// Object : {
// keyCode: Number,
// ctrl : Boolean,
// alt : Boolean,
// shift : Boolean
// }

// only Ctrl + Enter for search

filter_searchTrigger: [
{
keyCode: $.tablesorter.keyCodes.enter,
ctrl: true
}
]


}

});


$(".table_tab_enter").tablesorter({
theme: 'blue',
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
widgetOptions: {
// livesearch must set to false, we want to control the search trigger
filter_liveSearch: false,
// only Enter and Tab for search

// possibles values
// Number: 13,9 or internal constants: $.tablesorter.keyCodes
// String: "blur", "search", "change", "keypress" (events)
// Object : {
// keyCode: Number,
// ctrl : Boolean,
// alt : Boolean,
// shift : Boolean
// }

filter_searchTrigger: [
$.tablesorter.keyCodes.enter,
$.tablesorter.keyCodes.tab
]
}

});

});</script>

</head>

<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Search-Trigger Filter Widget Functions</h2>
<h3>Controlling the Keys/Events to search</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">

<p></p>
<br>
<h1>Demo</h1>

<div id="demo">
<table class="tablesorter table_ctrl_enter">
<thead>
<tr>
<th data-placeholder="Select a name">First Name</th>
<th data-placeholder="Exact matches only">Last Name</th>
<th data-placeholder="Choose a city">City</th>
<th>Age</th>
<th data-placeholder="Select a filter">Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aaron</td>
<td>Johnson Sr</td>
<td>Atlanta</td>
<td>35</td>
<td>$5.95</td>
<td>22%</td>
<td>Jun 26, 2004 7:22 AM</td>
</tr>
<tr>
<td>Aaron</td>
<td>Johnson</td>
<td>Yuma</td>
<td>12</td>
<td>$2.99</td>
<td>5%</td>
<td>Aug 21, 2009 12:21 PM</td>
</tr>
<tr>
<td>Clark</td>
<td>Henry Jr</td>
<td>Tampa</td>
<td>51</td>
<td>$42.29</td>
<td>18%</td>
<td>Oct 13, 2000 1:15 PM</td>
</tr>
<tr>
<td>Denni</td>
<td>Henry</td>
<td>New York</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>Boston</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent Sr</td>
<td>Los Angeles</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>Peter</td>
<td>Kent Esq</td>
<td>Seattle</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2021 9:12 AM</td>
</tr>
<tr>
<td>Peter</td>
<td>Johns</td>
<td>Milwaukee</td>
<td>13</td>
<td>$5.29</td>
<td>4%</td>
<td>Jan 8, 2012 5:11 PM</td>
</tr>
<tr>
<td>Aaron</td>
<td>Evan</td>
<td>Chicago</td>
<td>24</td>
<td>$14.19</td>
<td>14%</td>
<td>Jan 14, 2004 11:23 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>Upland</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>McMasters</td>
<td>Pheonix</td>
<td>18</td>
<td>$55.20</td>
<td>15%</td>
<td>Feb 12, 2010 7:23 PM</td>
</tr>
<tr>
<td>Dennis</td>
<td>Masters</td>
<td>Indianapolis</td>
<td>65</td>
<td>$123.00</td>
<td>32%</td>
<td>Jan 20, 2001 1:12 PM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>Fort Worth</td>
<td>25</td>
<td>$22.09</td>
<td>17%</td>
<td>Jun 11, 2011 10:55 AM</td>
</tr>
</tbody>
</table>
</div>

<div id="demo2">
<table class="tablesorter table_tab_enter">
<thead>
<tr>
<th data-placeholder="Select a name">First Name</th>
<th data-placeholder="Exact matches only">Last Name</th>
<th data-placeholder="Choose a city">City</th>
<th>Age</th>
<th data-placeholder="Select a filter">Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aaron</td>
<td>Johnson Sr</td>
<td>Atlanta</td>
<td>35</td>
<td>$5.95</td>
<td>22%</td>
<td>Jun 26, 2004 7:22 AM</td>
</tr>
<tr>
<td>Aaron</td>
<td>Johnson</td>
<td>Yuma</td>
<td>12</td>
<td>$2.99</td>
<td>5%</td>
<td>Aug 21, 2009 12:21 PM</td>
</tr>
<tr>
<td>Clark</td>
<td>Henry Jr</td>
<td>Tampa</td>
<td>51</td>
<td>$42.29</td>
<td>18%</td>
<td>Oct 13, 2000 1:15 PM</td>
</tr>
<tr>
<td>Denni</td>
<td>Henry</td>
<td>New York</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>Boston</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent Sr</td>
<td>Los Angeles</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>Peter</td>
<td>Kent Esq</td>
<td>Seattle</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2021 9:12 AM</td>
</tr>
<tr>
<td>Peter</td>
<td>Johns</td>
<td>Milwaukee</td>
<td>13</td>
<td>$5.29</td>
<td>4%</td>
<td>Jan 8, 2012 5:11 PM</td>
</tr>
<tr>
<td>Aaron</td>
<td>Evan</td>
<td>Chicago</td>
<td>24</td>
<td>$14.19</td>
<td>14%</td>
<td>Jan 14, 2004 11:23 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>Upland</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>McMasters</td>
<td>Pheonix</td>
<td>18</td>
<td>$55.20</td>
<td>15%</td>
<td>Feb 12, 2010 7:23 PM</td>
</tr>
<tr>
<td>Dennis</td>
<td>Masters</td>
<td>Indianapolis</td>
<td>65</td>
<td>$123.00</td>
<td>32%</td>
<td>Jan 20, 2001 1:12 PM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>Fort Worth</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.html">Filter Widget &rsaquo;&rsaquo;</a>
</div>
</div>
</body>

</html>
Loading