mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Added filter_liveSearch option
This commit is contained in:
Mottie
parent
97f657ac3b
commit
7333519717
@ -58,6 +58,10 @@
|
||||
// css class applied to the table row containing the filters & the inputs within that row
|
||||
filter_cssFilter : 'tablesorter-filter',
|
||||
|
||||
// add custom filter elements to the filter row
|
||||
// see the filter formatter demos for more specifics
|
||||
filter_formatter : null,
|
||||
|
||||
// add custom filter functions using this option
|
||||
// see the filter widget custom demo for more specifics on how to use this option
|
||||
filter_functions : null,
|
||||
@ -69,6 +73,9 @@
|
||||
// Set this option to false to make the searches case sensitive
|
||||
filter_ignoreCase : true,
|
||||
|
||||
// if true, search column content while the user types (with a delay)
|
||||
filter_liveSearch : true,
|
||||
|
||||
// jQuery selector string of an element used to reset the filters
|
||||
filter_reset : 'button.reset',
|
||||
|
||||
@ -76,6 +83,10 @@
|
||||
// every character while typing and should make searching large tables faster.
|
||||
filter_searchDelay : 300,
|
||||
|
||||
// if true, server-side filtering should be performed because client-side filtering will be disabled, but
|
||||
// the ui and events will still be used.
|
||||
filter_serversideFiltering: false,
|
||||
|
||||
// Set this option to true to use the filter to find text from the start of the column
|
||||
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
|
||||
filter_startsWith : false,
|
||||
@ -186,14 +197,16 @@ $(function(){
|
||||
<li><code>filter_childRows : false</code> - if true, filter includes child row content in the search.</li>
|
||||
<li><code>filter_columnFilters : true</code> - if true, a filter will be added to the top of each table column.</li>
|
||||
<li><code>filter_cssFilter : 'tablesorter-filter'</code> - css class name added to the filter row & each input in the row.</li>
|
||||
<li><code>filter_formatter : null</code> - add custom filter elements to the filter row.</li>
|
||||
<li><code>filter_functions : null</code> - add custom filter functions using this option.</li>
|
||||
<li><code>filter_hideFilters : false</code> - if true, filters are hidden initially, but can be revealed by clicking on the filter icon.</li>
|
||||
<li><code>filter_ignoreCase : true</code> - if true, make all searches case-insensitive.</li>
|
||||
<li><code>filter_liveSearch : true</code> - if true, search column content while the user types (with a delay).</li>
|
||||
<li><code>filter_reset : null</code> - jQuery selector string of an element used to reset the filters.</li>
|
||||
<li><code>filter_searchDelay : 300</code> - typing delay in milliseconds before starting a search.</li>
|
||||
<li><code>filter_serversideFiltering : false</code> - if true, filter will be done server-side. The client-side filtering will be disabled, but the ui and events will still be used..</li>
|
||||
<li><code>filter_startsWith : false</code> - if true, filter start from the beginning of the cell contents.</li>
|
||||
<li><code>filter_useParsedData : false</code> - filter all data using parsed content.</li>
|
||||
<li><code>filter_serversideFiltering : false</code> - if true, server-side filtering should be performed because client-side filtering will be disabled, but the ui and events will still be used.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@ -298,12 +298,13 @@
|
||||
<ul>
|
||||
<li><a href="example-widget-filter.html">basic</a> (v2.0.18)</li>
|
||||
<li><a href="example-widget-filter-custom.html">custom</a> (v2.3.6)</li>
|
||||
<li>formatter (<a href="example-widget-filter-formatter-1.html">jQuery UI widgets</a> and <a href="">HTML5 Elements</a>) <span class="tip"><em>New</em></span> v2.7.7.</li>
|
||||
<li>formatter (<a href="example-widget-filter-formatter-1.html">jQuery UI widgets</a> and <a href="">HTML5 Elements</a>) (v2.7.7).</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="example-widget-grouping.html">Grouping rows Widget</a> <span class="tip"><em>New</em></span> v2.8.</li>
|
||||
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="tip"><em>Updated</em></span> v2.8.3)</li>
|
||||
<li><a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
|
||||
<li><a href="example-widget-scroller.html">Scroller widget</a> <span class="tip"><em>New</em></span> v2.9.</li>
|
||||
<li><a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1)</li>
|
||||
<li>UITheme widget:
|
||||
<ul>
|
||||
@ -354,7 +355,7 @@
|
||||
<ul>
|
||||
<li><a href="example-widget-ui-theme.html">UITheme widget</a> (v2.0.9)</li>
|
||||
<li><a href="example-option-render-header.html">Modifying the Header during rendering.</a></li>
|
||||
<li><a href="example-option-render-template.html">Modifying the Header using a template</a>. <span class="tip"><em>New!</em></span> v2.7</li>
|
||||
<li><a href="example-option-render-template.html">Modifying the Header using a template</a> (v2.7)</li>
|
||||
</ul>
|
||||
|
||||
<br/>
|
||||
@ -544,7 +545,7 @@
|
||||
<td><a href="#" class="toggle2">cssIcon</a></td>
|
||||
<td>String</td>
|
||||
<td>"tablesorter-icon"</td>
|
||||
<td>The CSS style used to style the header cell icon. <span class="tip"><em>Modified!</em></span> v2.7.
|
||||
<td>The CSS style used to style the header cell icon (modified v2.7).
|
||||
<div class="collapsible"><br>
|
||||
As of v2.4, an <i> element, with this class name, is automatically appended to the header cells. To prevent the plugin from adding an <i> element to the headers, set the <code>cssIcon</code> option to an empty string.<br>
|
||||
<br>
|
||||
@ -743,7 +744,7 @@
|
||||
<td><a href="#" class="toggle2">headerTemplate</a></td>
|
||||
<td>String</td>
|
||||
<td>'{content}'</td>
|
||||
<td>This is a template string which allows adding additional content to the header while it is being built. <span class="tip"><em>New!</em></span> v2.7.
|
||||
<td>This is a template string which allows adding additional content to the header while it is being built (v2.7).
|
||||
<div class="collapsible"><br>
|
||||
This template string has two modifying tags: <code>{content}</code> and <code>{icon}</code>.<br>
|
||||
<code>{content}</code> will be replaced by the current header HTML content.<br>
|
||||
@ -814,7 +815,7 @@
|
||||
<td>Function</td>
|
||||
<td>null</td>
|
||||
<td>
|
||||
This function is called after the template string has been built, but before the template string is applied to the header and before the <code>onRenderHeader</code> function is called. <span class="tip"><em>New!</em></span> v2.7.
|
||||
This function is called after the template string has been built, but before the template string is applied to the header and before the <code>onRenderHeader</code> function is called (v2.7).
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
The <code>onRenderTemplate</code> function receives a column index and template string parameters. The template string, from the <a href="#headertemplate"><code>headerTemplate</code> option</a>, will already have the <code>{icon}</code> and <code>{content}</code> tags replaced; it's just a string of formatted HTML. When done manipulating this string, return it. Here is an example:
|
||||
@ -1604,7 +1605,7 @@ $(function(){
|
||||
<td>Object</td>
|
||||
<td>null</td>
|
||||
<td>
|
||||
Filter widget: This option allows you to add custom controls within the filter widget row. <span class="tip"><em>New!</em> v2.7.7</span><br>
|
||||
Filter widget: This option allows you to add custom controls within the filter widget row (v2.7.7).<br>
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
A new file has been included named "jquery.tablesorter.widgets-filter-formatter.js". It includes code to add jQuery UI and HTML5 controls via the <a href="#widget-filter-formatter"><code>filter_formatter</code></a> option.<br>
|
||||
@ -1796,6 +1797,20 @@ $(function(){
|
||||
<td><a href="example-widget-filter.html">Example</a></td>
|
||||
</tr>
|
||||
|
||||
<tr id="widget-filter-livesearch">
|
||||
<td><a href="#" class="toggle2">filter_liveSearch</a></td>
|
||||
<td>Boolean</td>
|
||||
<td>true</td>
|
||||
<td>
|
||||
Filter widget: Search the column content as the user types, with the delay set in the <code>filter_searchDelay</code> option <span class="tip"><em>New!</em></span> v2.9.
|
||||
<div class="collapsible">
|
||||
<br>
|
||||
This option allows you to disable the live search behavior so that a filter is only applied when the user presses enter (or uses escape to clear and cancel the search).
|
||||
</div>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr id="widget-filter-reset">
|
||||
<td><a href="#" class="toggle2">filter_reset</a></td>
|
||||
<td>String</td>
|
||||
@ -2820,7 +2835,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
|
||||
|
||||
<tr id="filterreset">
|
||||
<td><a href="#" class="toggle2">filterReset</a></td>
|
||||
<td>Trigger the filter widget to reset the search criteria. <span class="tip"><em>New!</em></span> v2.7.7.
|
||||
<td>Trigger the filter widget to reset the search criteria (v2.7.7).
|
||||
<div class="collapsible">
|
||||
If you are using the <code>filter_formatter</code> option to add custom input elements, this function may not work on those columns. Please refer to the <code>filter_formatter</code> section for more details.
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
@ -2834,7 +2849,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
|
||||
|
||||
<tr id="savesortreset">
|
||||
<td><a href="#" class="toggle2">saveSortReset</a></td>
|
||||
<td>Trigger the saveSort widget to clear any saved sorts for that specific table. <span class="tip"><em>New!</em></span> v2.7.11.
|
||||
<td>Trigger the saveSort widget to clear any saved sorts for that specific table (v2.7.11).
|
||||
<div class="collapsible">
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
$('button').click(function(){
|
||||
@ -2853,7 +2868,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
|
||||
<tbody>
|
||||
<tr id="pagesize">
|
||||
<td><a href="#" class="toggle2">pageSize</a></td>
|
||||
<td>Trigger the pager to change the page size. <span class="tip"><em>New!</em></span> v2.7.4.
|
||||
<td>Trigger the pager to change the page size (v2.7.4).
|
||||
<div class="collapsible">
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
$('table').trigger('pageSize', 15);
|
||||
@ -2863,7 +2878,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
|
||||
</tr>
|
||||
<tr id="pageset">
|
||||
<td><a href="#" class="toggle2">pageSet</a></td>
|
||||
<td>Trigger the pager to change the current page. <span class="tip"><em>New!</em></span> v2.7.7.
|
||||
<td>Trigger the pager to change the current page (v2.7.7).
|
||||
<div class="collapsible">
|
||||
<pre class="prettyprint lang-javascript">$(function(){
|
||||
$('table').trigger('pageSet', 3);
|
||||
|
||||
@ -291,6 +291,7 @@ ts.addWidget({
|
||||
filter_functions : null, // add custom filter functions using this option
|
||||
filter_hideFilters : false, // collapse filter row when mouse leaves the area
|
||||
filter_ignoreCase : true, // if true, make all searches case-insensitive
|
||||
filter_liveSearch : true, // if true, search column content while the user types (with a delay)
|
||||
filter_reset : null, // jQuery selector string of an element used to reset the filters
|
||||
filter_searchDelay : 300, // typing delay in milliseconds before starting a search
|
||||
filter_startsWith : false, // if true, filter start from the beginning of the cell contents
|
||||
@ -585,7 +586,7 @@ ts.addWidget({
|
||||
})
|
||||
.find('input.' + css).bind('keyup search', function(e, filter){
|
||||
// ignore arrow and meta keys; allow backspace
|
||||
if (e.type === 'keyup' && ((e.which < 32 && e.which !== 8) || (e.which >= 37 && e.which <=40))) { return; }
|
||||
if (e.type === 'keyup' && ((e.which < 32 && e.which !== 8) || (e.which >= 37 && e.which <=40) || (e.which !== 13 && !wo.filter_liveSearch))) { return; }
|
||||
// skip delay
|
||||
if (typeof filter !== 'undefined' && filter !== true){
|
||||
checkFilters(filter);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user