mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Docs: Add button type
It's the OCD I tell ya!
This commit is contained in:
Rob Garrison
parent
c036d0dcda
commit
7268e9ab34
@ -573,10 +573,10 @@
|
||||
<hr>
|
||||
|
||||
<h3 id="child-by-column">childByColumn</h3>
|
||||
<button class="toggle-byColumn" type="button">Toggle</button> <code>filter_childByColumn</code> : <span class="state2">true</span>
|
||||
<button type="button" class="toggle-byColumn">Toggle</button> <code>filter_childByColumn</code> : <span class="state2">true</span>
|
||||
<ul>
|
||||
<li>This option requires the <code>filter_childRow</code> option to be set to <code>true</code> in order to work.</li>
|
||||
<li>If <code>true</code>, child row content can be filtered in the same manner as regular rows. Try searching for values <button data-column="1"><1000</button> in the "FastCar" column, or values between <button data-column="2">3000 - 4000</button> in the "RapidZoo" column. Only one match in a child row is required to show the entire parent/child group.</li>
|
||||
<li>If <code>true</code>, child row content can be filtered in the same manner as regular rows. Try searching for values <button type="button" data-column="1"><1000</button> in the "FastCar" column, or values between <button type="button" data-column="2">3000 - 4000</button> in the "RapidZoo" column. Only one match in a child row is required to show the entire parent/child group.</li>
|
||||
<li>If <code>false</code>, child row content will be grouped together and included in any column search; as was the behavior before this option was added.</li>
|
||||
<li>Extra css was added to override the theme row highlighting to group parent/child highlighting; it just doesn't look that good and it may be removed from the themes in the future.</li>
|
||||
</ul>
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
|
||||
Search:
|
||||
<input type="search" class="search" data-column="all" placeholder="Search all columns"><sup class="results xsmall">‡</sup>
|
||||
<button class="reset">Reset</button>
|
||||
<button type="button" class="reset">Reset</button>
|
||||
<code id="show-filter"></code>
|
||||
|
||||
<p class="xsmall"><span class="results">†</span> The reason for this issue is that the filter input in the index column has this setting:
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
<div id="main">
|
||||
<p id="settings" class="hidden">
|
||||
Delay init is <em class="status">enabled</em>.
|
||||
<button class="toggle">Disable it</button> (value is stored in session storage) and <button class="reload">reload</button> the page. Compare page initialization time and
|
||||
<button type="button" class="toggle">Disable it</button> (value is stored in session storage) and <button type="button" class="reload">reload</button> the page. Compare page initialization time and
|
||||
first sorting time in each case.</p>
|
||||
<p class="tip">
|
||||
<em>NOTE!</em> If firebug is installed the debuging information will be displayed in the firebug console. Watch for
|
||||
|
||||
@ -253,7 +253,7 @@
|
||||
<li>In <span class="version">v2.11</span>, the <code>savePages</code> option was added to saves the current page size and number (requires storage script).</li>
|
||||
</ul>
|
||||
|
||||
<h1>Triggered Events <button class="clear">Clear</button></h1>
|
||||
<h1>Triggered Events <button type="button" class="clear">Clear</button></h1>
|
||||
<ul id="display">
|
||||
<li>Pager events will appear here.</li>
|
||||
<li> </li>
|
||||
|
||||
@ -130,7 +130,7 @@ $.tablesorter.fileTypes.equivalents["Fonts"] += '|svg'; // just add it to the en
|
||||
<h1>Demo</h1>
|
||||
<div id="demo">
|
||||
|
||||
<button>Switch</button> (switch media column between "group-separator-1" & "group-separator-2")
|
||||
<button type="button">Switch</button> (switch media column between "group-separator-1" & "group-separator-2")
|
||||
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
|
||||
@ -117,12 +117,12 @@ Basic Asc/Desc sort
|
||||
<div class="block">
|
||||
<div class="left box" data-id="1">
|
||||
|
||||
<button class="sort-reset" data-sort="[]">Reset</button>
|
||||
<button type="button" class="sort-reset" data-sort="[]">Reset</button>
|
||||
<h3>Sort Ascending/Descending</h3>
|
||||
Use <code>0</code> or <code>"a"</code> for ascending sorts, and <code>1</code> or <code>"d"</code> for descending sorts<super>*</super><br>
|
||||
<br>
|
||||
<button data-sort="[[0,0]]">Asc</button> (<code>[[0,0]]</code>) <button data-sort='[[0,"a"],[1,"d"]]'>Asc/Desc</button> (<code>[[0,"a"],[1,"d"]]</code>)<br>
|
||||
<button data-sort="[[0,1]]">Desc</button> (<code>[[0,1]]</code>) <button data-sort='[[0,"d"],[1,"a"]]'>Desc/Asc</button> (<code>[[0,"d"],[1,"a"]]</code>)
|
||||
<button type="button" data-sort="[[0,0]]">Asc</button> (<code>[[0,0]]</code>) <button type="button" data-sort='[[0,"a"],[1,"d"]]'>Asc/Desc</button> (<code>[[0,"a"],[1,"d"]]</code>)<br>
|
||||
<button type="button" data-sort="[[0,1]]">Desc</button> (<code>[[0,1]]</code>) <button type="button" data-sort='[[0,"d"],[1,"a"]]'>Desc/Asc</button> (<code>[[0,"d"],[1,"a"]]</code>)
|
||||
<pre class="prettyprint lang-js updating">$("#table1").trigger("sorton", [ [] ]);</pre>
|
||||
<small>* <code>"a"</code> & <code>"d"</code> values added <span class="version">v2.17.0</span>.</small>
|
||||
</div>
|
||||
@ -151,17 +151,17 @@ Toggle Sort (Next)
|
||||
<div class="block">
|
||||
<div class="left box" data-id="2">
|
||||
|
||||
<button class="sort-reset" data-sort="[]">Reset</button>
|
||||
<button type="button" class="sort-reset" data-sort="[]">Reset</button>
|
||||
<h3>Toggle sort (Next)</h3>
|
||||
Either trigger a <code>"sort"</code> on the desired column, or <code>"sorton"</code> on the table using the <code>"n"</code> value<super>*</super>.<br>
|
||||
Toggle the <button class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
|
||||
Toggle the <button type="button" class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
|
||||
|
||||
<br>
|
||||
Trigger "sort" event: <button id="toggle-sort">Discount</button> (v2.9)
|
||||
Trigger "sort" event: <button type="button" id="toggle-sort">Discount</button> (v2.9)
|
||||
<pre class="prettyprint lang-js">$("#table2").find("th:contains(Discount)").trigger("sort");</pre>
|
||||
|
||||
<button data-sort='[[0,"n"]]'>Asc/Desc</button> (<code>[[0,"n"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"n"]]'>Asc/Desc</button> (<code>[[0,"n"],[1,"n"]]</code>; columns are independent)
|
||||
<button type="button" data-sort='[[0,"n"]]'>Asc/Desc</button> (<code>[[0,"n"]]</code>)<br>
|
||||
<button type="button" data-sort='[[0,"n"],[1,"n"]]'>Asc/Desc</button> (<code>[[0,"n"],[1,"n"]]</code>; columns are independent)
|
||||
<pre class="prettyprint lang-js updating">$("#table2").trigger("sorton", [ [] ]);</pre>
|
||||
<small>* <code>"n"</code> value added <span class="version">v2.17.0</span>.</small>
|
||||
</div>
|
||||
@ -189,19 +189,19 @@ Sort Same/Opposite
|
||||
-->
|
||||
<div class="block">
|
||||
<div class="left box" data-id="3">
|
||||
<button class="sort-reset" data-sort="[]">Reset</button>
|
||||
<button type="button" class="sort-reset" data-sort="[]">Reset</button>
|
||||
<h3>Sort Same/Opposite</h3>
|
||||
The same (<code>"s"</code>) or opposite (<code>"o"</code>) sort values always set the column sort based on the primary column<super>*</super>.<br>
|
||||
Toggle the <button class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
|
||||
Toggle the <button type="button" class="sortReset-toggle">sortReset</button> option (<code class="kwd">false</code>), then try these sorts (click a third time).<br>
|
||||
<br>
|
||||
<button data-sort='[[0,"s"]]'>Same</button> (<code>[[0,"s"]]</code>; always defaults to Asc sort if set on primary column)<br>
|
||||
<button data-sort='[[0,0],[1,"s"]]'>Asc/same</button> (<code>[[0,0],[1,"s"]]</code>)<br>
|
||||
<button data-sort='[[0,1],[1,"s"]]'>Desc/same</button> (<code>[[0,1],[1,"s"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"s"]]'>Next/same</button> (<code>[[0,"n"],[1,"s"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"o"]]'>Next/opposite</button> (<code>[[0,"n"],[1,"o"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"o"],[2,"n"]]'>Next/opposite/next</button> (<code>[[0,"n"],[1,"o"],[2,"n"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"o"],[2,"s"]]'>Next/opposite/same</button> (<code>[[0,"n"],[1,"o"],[2,"s"]]</code>)<br>
|
||||
<button data-sort='[[0,"n"],[1,"o"],[2,"s"],[3,"o"]]'>Next/opposite/same/opposite</button> (<code>[[0,"n"],[1,"o"],[2,"s"],[3,"o"]]</code>)
|
||||
<button type="button" data-sort='[[0,"s"]]'>Same</button> (<code>[[0,"s"]]</code>; always defaults to Asc sort if set on primary column)<br>
|
||||
<button type="button" data-sort='[[0,0],[1,"s"]]'>Asc/same</button> (<code>[[0,0],[1,"s"]]</code>)<br>
|
||||
<button type="button" data-sort='[[0,1],[1,"s"]]'>Desc/same</button> (<code>[[0,1],[1,"s"]]</code>)<br>
|
||||
<button type="button" data-sort='[[0,"n"],[1,"s"]]'>Next/same</button> (<code>[[0,"n"],[1,"s"]]</code>)<br>
|
||||
<button type="button" data-sort='[[0,"n"],[1,"o"]]'>Next/opposite</button> (<code>[[0,"n"],[1,"o"]]</code>)<br>
|
||||
<button type="button" data-sort='[[0,"n"],[1,"o"],[2,"n"]]'>Next/opposite/next</button> (<code>[[0,"n"],[1,"o"],[2,"n"]]</code>)<br>
|
||||
<button type="button" data-sort='[[0,"n"],[1,"o"],[2,"s"]]'>Next/opposite/same</button> (<code>[[0,"n"],[1,"o"],[2,"s"]]</code>)<br>
|
||||
<button type="button" data-sort='[[0,"n"],[1,"o"],[2,"s"],[3,"o"]]'>Next/opposite/same/opposite</button> (<code>[[0,"n"],[1,"o"],[2,"s"],[3,"o"]]</code>)
|
||||
<pre class="prettyprint lang-js updating">$("#table3").trigger("sorton", [ [] ]);</pre>
|
||||
<small>* <code>"s"</code> & <code>"o"</code> values added <span class="version">v2.17.0</span>.</small>
|
||||
</div>
|
||||
|
||||
@ -507,8 +507,8 @@ td.editable_updated {
|
||||
<p></p>
|
||||
<h1>Demo</h1>
|
||||
|
||||
<button class="auto">Toggle</button> <code>editable_autoAccept : <span>true</span></code><br>
|
||||
<button class="enter">Toggle</button> <code>editable_enterToAccept : <span>true</span></code>
|
||||
<button type="button" class="auto">Toggle</button> <code>editable_autoAccept : <span>true</span></code><br>
|
||||
<button type="button" class="enter">Toggle</button> <code>editable_enterToAccept : <span>true</span></code>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table id="table" class="tablesorter">
|
||||
|
||||
@ -239,7 +239,7 @@
|
||||
}</pre></li>
|
||||
<li>The example shows you how to show only exact matches. The problem with this is that you can't see the matches while typing unless you set the <code>filter_searchDelay</code> option to be a bit longer.</li>
|
||||
<li>Also, the example only checks for an exact match (<code>===</code>) meaning the <code>filter_ignoreCase</code> option is ignored, but other comparisons can be made using regex and the insensitive "i" flag.</li>
|
||||
<li><span class="label warning">*NOTE*</span> If using an exact match function like this, consider setting the <a href="index.html#widget-filter-searchfiltered"><code>filter_searchFiltered</code></a> option to false. If it were set to <code>true</code>, the filter widget wouldn't know to search through the entire contents of the column if the content were only slightly different. To see this problem, search for <button data-filter-column="1">Evan</button> in the "Last Name" column, then add an "s" to the end to find "Evans". No results will show up, unless the search filtered option is <code>false</code>.</li>
|
||||
<li><span class="label warning">*NOTE*</span> If using an exact match function like this, consider setting the <a href="index.html#widget-filter-searchfiltered"><code>filter_searchFiltered</code></a> option to false. If it were set to <code>true</code>, the filter widget wouldn't know to search through the entire contents of the column if the content were only slightly different. To see this problem, search for <button type="button" data-filter-column="1">Evan</button> in the "Last Name" column, then add an "s" to the end to find "Evans". No results will show up, unless the search filtered option is <code>false</code>.</li>
|
||||
<li>See the filter function information below for more details about the function parameters.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -223,10 +223,10 @@
|
||||
<li>Added <code>endOfDay</code> option for jQuery UI Datepicker.
|
||||
<ul>
|
||||
<li>When <code>true</code> search dates will include all times from the date chosen when a comparison is made of dates "less than" the set date.</li>
|
||||
<li>Example 1: if a table entry has a date of "Jan 14, 2014 11:23 AM" and the filter search is set to <button data-column="4" data-value="<=1/14/2014"><= 1/14/2014</button>, the table entry will be included in the search; the default set time would otherwise be "1/14/2014 00:00:00" and not include the entry from "11:23 AM". So, the <code>endOfDay</code> option sets the time to "23:59:59".</li>
|
||||
<li>Example 2: if searching for one specific date, this option will now search for all times within that day. For example, searching for <button data-column="4" data-value="=1/20/2014">= 1/20/2014</button>, and the results will include dates from 1/20/2014 00:00:00 to 1/20/2014 23:59:59.</li>
|
||||
<li>Example 1: if a table entry has a date of "Jan 14, 2014 11:23 AM" and the filter search is set to <button type="button" data-column="4" data-value="<=1/14/2014"><= 1/14/2014</button>, the table entry will be included in the search; the default set time would otherwise be "1/14/2014 00:00:00" and not include the entry from "11:23 AM". So, the <code>endOfDay</code> option sets the time to "23:59:59".</li>
|
||||
<li>Example 2: if searching for one specific date, this option will now search for all times within that day. For example, searching for <button type="button" data-column="4" data-value="=1/20/2014">= 1/20/2014</button>, and the results will include dates from 1/20/2014 00:00:00 to 1/20/2014 23:59:59.</li>
|
||||
<li>When comparing dates greater than the set date, the time will be set to midnight; so this option will not be applied.</li>
|
||||
<li>Example 3: in two date inputs, the <code>endOfDay</code> time is only applied to the "to" input; search for <button data-column="5" data-value="1/20/2014 - 1/20/2014">1/20/2014 - 1/20/2014</button></li>
|
||||
<li>Example 3: in two date inputs, the <code>endOfDay</code> time is only applied to the "to" input; search for <button type="button" data-column="5" data-value="1/20/2014 - 1/20/2014">1/20/2014 - 1/20/2014</button></li>
|
||||
<li>This option is available in both the comparison (one input) and range (two inputs; "to" date input only) date pickers.</li>
|
||||
</ul>
|
||||
</li>
|
||||
@ -407,8 +407,8 @@
|
||||
<li>In <span class="version">v2.15.0</span>
|
||||
<ul>
|
||||
<li>The <code>compare</code> option was updated to allow adding a selector along with the input. The <code>selected</code> option allows choosing the default setting.</li>
|
||||
<li>A <code>endOfDay</code> option was added, which when a <code><=</code> comparison is made, will include all times within the selected day. Try searching for <button data-column="4" data-value="<=1/14/2014"><= 1/14/2014</button>; it basically sets the time of the selected day to end at 23:59:59.</li>
|
||||
<li>Additionally, when <code>endOfDay</code> option is <code>true</code> and using an exact (<code>=</code>) comparison, all times within that selected day will be included - try searching for <button data-column="4" data-value="=1/20/2014">= 1/20/2014</button> to note that the day include various times.</li>
|
||||
<li>A <code>endOfDay</code> option was added, which when a <code><=</code> comparison is made, will include all times within the selected day. Try searching for <button type="button" data-column="4" data-value="<=1/14/2014"><= 1/14/2014</button>; it basically sets the time of the selected day to end at 23:59:59.</li>
|
||||
<li>Additionally, when <code>endOfDay</code> option is <code>true</code> and using an exact (<code>=</code>) comparison, all times within that selected day will be included - try searching for <button type="button" data-column="4" data-value="=1/20/2014">= 1/20/2014</button> to note that the day include various times.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</li>
|
||||
@ -473,7 +473,7 @@
|
||||
<li><span class="label label-info">Note</span> The browser must support the <a href="http://caniuse.com/#feat=input-placeholder">placeholder attribute</a> before this text will be visible.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In <span class="version">v2.15.0</span>, an <code>endOfDay</code> option was added, which when <code>true</code> and searching within one day, all times within that selected day will be included - try searching for <button data-column="5" data-value="1/20/2014 - 1/20/2014">1/20/2014 - 1/20/2014</button> to note that the day include various times.<br></li>
|
||||
<li>In <span class="version">v2.15.0</span>, an <code>endOfDay</code> option was added, which when <code>true</code> and searching within one day, all times within that selected day will be included - try searching for <button type="button" data-column="5" data-value="1/20/2014 - 1/20/2014">1/20/2014 - 1/20/2014</button> to note that the day include various times.<br></li>
|
||||
<li>This example shows how you can add a jQuery UI Datepicker range to filter column content.</li>
|
||||
<li>The <code>filter_formatter</code> function provided in the extra "widget-filter-formatter-jui.js" file is used to add this custom control within the filter row.</li>
|
||||
<li>This code follows the <a class="external" href="http://jqueryui.com/datepicker/#date-range">date range</a> example from the jQuery UI docs.</li>
|
||||
|
||||
@ -173,7 +173,7 @@
|
||||
<p></p>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<div id="demo"><button class="reset">Reset Search</button>
|
||||
<div id="demo"><button type="button" class="reset">Reset Search</button>
|
||||
<table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@ -253,7 +253,7 @@ $(function(){
|
||||
<ul>
|
||||
<li>The <a class="intlink" href="#method-get-filters"><code>getFilters</code></a> function will now target the last used filter properly.</li>
|
||||
<li>The <a class="intlink" href="#filter-select-source"><code>filter_selectSource</code></a> option now ignores parsers if none are set.</li>
|
||||
<li>Added the ability to nest filter types with a logical "OR" or a logical "AND". Try these filters: <button data-filter-column="1">a && !o</button> (<span class="label warning">*NOTE*</span> try this with and without the filter-match class applied), <button data-filter-column="3"><20 or >40</button> or <button data-filter-column="3">>20 && <40</button></li>
|
||||
<li>Added the ability to nest filter types with a logical "OR" or a logical "AND". Try these filters: <button type="button" data-filter-column="1">a && !o</button> (<span class="label warning">*NOTE*</span> try this with and without the filter-match class applied), <button type="button" data-filter-column="3"><20 or >40</button> or <button type="button" data-filter-column="3">>20 && <40</button></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -311,17 +311,17 @@ $(function(){
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td class="center">1</td><td class="center"><code>|</code> or <code> OR </code></td><td>Logical "or" (Vertical bar). Filter the column for content that matches text from either side of the bar <small class="bright">(2)</small>.</td><td><code>box|bat</code> (matches a column cell with either "box" or "bat");<button data-filter-column="1">Alex|Peter</button> (Find text that contains either "Alex" or "Peter"); <button data-filter-column="3"><20 or >40</button></td></tr>
|
||||
<tr><td class="center">2</td><td class="center"><code> && </code> or <code> AND </code></td><td>Logical "and". Filter the column for content that matches text from either side of the operator.</td><td><code>box && bat</code> (matches a column cell that contains both "box" and "bat"), <button data-filter-column="1">Br && c</button> (Find text that contains both "br" and "c"), <button data-filter-column="3">>20 && <40</button> or <button data-filter-column="1">a and !o</button> (When "filter-match" is set, find content with the letter "a", but not the letter "o")</td></tr>
|
||||
<tr><td class="center">3</td><td class="center"><code>/\d/</code></td><td>Add any regex to the query to use in the query ("mig" flags can be included <code>/\w/mig</code>)</td><td><code>/b[aeiou]g/i</code> (finds "bag", "beg", "BIG", "Bug", etc);<button data-filter-column="1">/r$/</button> (matches text that ends with an "r")</td></tr>
|
||||
<tr><td class="center">4</td><td class="center"><code>< <= >= ></code></td><td>Find alphabetical or numerical values less than or greater than or equal to the filtered query <small class="bright">(1)</small>.</td><td><button data-filter-column="5">>= 10</button> (find values greater than or equal to 10)</td></tr>
|
||||
<tr><td class="center">5</td><td class="center"><code>!</code> or <code>!=</code></td><td>Not operator, or not exactly match. Filter the column with content that <strong>do not</strong> match the query. Include an equal (<code>=</code>), single (<code>'</code>) or double quote (<code>"</code>) to exactly <em>not</em> match a filter (<span class="version">v2.17.1</span>).</td><td><code>!fe</code> (hide rows with "female" in that column, but shows rows with "male");<button data-filter-column="1">!a</button> (find text that doesn't contain an "a");<button data-filter-column="1">!"Bruce"</button> (find content that does not exactly match "Bruce")</td></tr>
|
||||
<tr><td class="center">6</td><td class="center"><code>"</code> or <code>=</code></td><td>To exactly match the search query, add a quote, apostrophe or equal sign to the beginning and/or end of the query</td><td><code>abc"</code> or <code>abc=</code> (exactly match "abc");<button data-filter-column="1">John"</button> or <button data-filter-column="1">John=</button> (exactly match "John")</td></tr>
|
||||
<tr><td class="center">7</td><td class="center"><code> - </code> or <code> to </code></td><td>Find a range of values. Make sure there is a space before and after the dash (or the word "to") <small class="bright">(3)</small>.</td><td><button data-filter-column="3">10 - 30</button> or <button data-filter-column="4">10 to 30</button> (match values between 10 and 30)</td></tr>
|
||||
<tr><td class="center">8</td><td class="center"><code>?</code></td><td>Wildcard for a single, non-space character.</td><td><code>J?n</code> (finds "Jan" and "Jun", but not "Joan");<button data-filter-column="2">a?s</button> (finds "Dumass" and "Evans", but not "McMasters")</td></tr>
|
||||
<tr><td class="center">8</td><td class="center"><code>*</code></td><td>Wildcard for zero or more non-space characters.</td><td><code>B*k</code> (matches "Black" and "Book");<button data-filter-column="2">a*s</button> (matches "Dumass", "Evans" and "McMasters")</td></tr>
|
||||
<tr><td class="center">9</td><td class="center"><code>~</code></td><td>Perform a fuzzy search (matches sequential characters) by adding a tilde to the beginning of the query (<span class="version">v2.13.3</span>)</td><td><button data-filter-column="1">~bee</button> (matches "Bruce Lee" and "Brenda Dexter"), or <button data-filter-column="1">~piano</button> (matches "Philip Aaron Wong")</td></tr>
|
||||
<tr><td class="center">10</td><td class="center">text</td><td>Any text entered in the filter will <strong>match</strong> text found within the column</td><td><code>abc</code> (finds "abc", "abcd", "abcde", etc);<button data-filter-column="1">Aaron</button> (finds "Aaron" and "Philip Aaron Wong")</td></tr>
|
||||
<tr><td class="center">1</td><td class="center"><code>|</code> or <code> OR </code></td><td>Logical "or" (Vertical bar). Filter the column for content that matches text from either side of the bar <small class="bright">(2)</small>.</td><td><code>box|bat</code> (matches a column cell with either "box" or "bat");<button type="button" data-filter-column="1">Alex|Peter</button> (Find text that contains either "Alex" or "Peter"); <button type="button" data-filter-column="3"><20 or >40</button></td></tr>
|
||||
<tr><td class="center">2</td><td class="center"><code> && </code> or <code> AND </code></td><td>Logical "and". Filter the column for content that matches text from either side of the operator.</td><td><code>box && bat</code> (matches a column cell that contains both "box" and "bat"), <button type="button" data-filter-column="1">Br && c</button> (Find text that contains both "br" and "c"), <button type="button" data-filter-column="3">>20 && <40</button> or <button type="button" data-filter-column="1">a and !o</button> (When "filter-match" is set, find content with the letter "a", but not the letter "o")</td></tr>
|
||||
<tr><td class="center">3</td><td class="center"><code>/\d/</code></td><td>Add any regex to the query to use in the query ("mig" flags can be included <code>/\w/mig</code>)</td><td><code>/b[aeiou]g/i</code> (finds "bag", "beg", "BIG", "Bug", etc);<button type="button" data-filter-column="1">/r$/</button> (matches text that ends with an "r")</td></tr>
|
||||
<tr><td class="center">4</td><td class="center"><code>< <= >= ></code></td><td>Find alphabetical or numerical values less than or greater than or equal to the filtered query <small class="bright">(1)</small>.</td><td><button type="button" data-filter-column="5">>= 10</button> (find values greater than or equal to 10)</td></tr>
|
||||
<tr><td class="center">5</td><td class="center"><code>!</code> or <code>!=</code></td><td>Not operator, or not exactly match. Filter the column with content that <strong>do not</strong> match the query. Include an equal (<code>=</code>), single (<code>'</code>) or double quote (<code>"</code>) to exactly <em>not</em> match a filter (<span class="version">v2.17.1</span>).</td><td><code>!fe</code> (hide rows with "female" in that column, but shows rows with "male");<button type="button" data-filter-column="1">!a</button> (find text that doesn't contain an "a");<button type="button" data-filter-column="1">!"Bruce"</button> (find content that does not exactly match "Bruce")</td></tr>
|
||||
<tr><td class="center">6</td><td class="center"><code>"</code> or <code>=</code></td><td>To exactly match the search query, add a quote, apostrophe or equal sign to the beginning and/or end of the query</td><td><code>abc"</code> or <code>abc=</code> (exactly match "abc");<button type="button" data-filter-column="1">John"</button> or <button type="button" data-filter-column="1">John=</button> (exactly match "John")</td></tr>
|
||||
<tr><td class="center">7</td><td class="center"><code> - </code> or <code> to </code></td><td>Find a range of values. Make sure there is a space before and after the dash (or the word "to") <small class="bright">(3)</small>.</td><td><button type="button" data-filter-column="3">10 - 30</button> or <button type="button" data-filter-column="4">10 to 30</button> (match values between 10 and 30)</td></tr>
|
||||
<tr><td class="center">8</td><td class="center"><code>?</code></td><td>Wildcard for a single, non-space character.</td><td><code>J?n</code> (finds "Jan" and "Jun", but not "Joan");<button type="button" data-filter-column="2">a?s</button> (finds "Dumass" and "Evans", but not "McMasters")</td></tr>
|
||||
<tr><td class="center">8</td><td class="center"><code>*</code></td><td>Wildcard for zero or more non-space characters.</td><td><code>B*k</code> (matches "Black" and "Book");<button type="button" data-filter-column="2">a*s</button> (matches "Dumass", "Evans" and "McMasters")</td></tr>
|
||||
<tr><td class="center">9</td><td class="center"><code>~</code></td><td>Perform a fuzzy search (matches sequential characters) by adding a tilde to the beginning of the query (<span class="version">v2.13.3</span>)</td><td><button type="button" data-filter-column="1">~bee</button> (matches "Bruce Lee" and "Brenda Dexter"), or <button type="button" data-filter-column="1">~piano</button> (matches "Philip Aaron Wong")</td></tr>
|
||||
<tr><td class="center">10</td><td class="center">text</td><td>Any text entered in the filter will <strong>match</strong> text found within the column</td><td><code>abc</code> (finds "abc", "abcd", "abcde", etc);<button type="button" data-filter-column="1">Aaron</button> (finds "Aaron" and "Philip Aaron Wong")</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span class="bright">(1)</span> The filter order (or precendence) of how searches are checked in "priority" (first column) order; so an exact match will override "range" searches (*NOTE* order changed in <span class="version updated">v2.15</span>, operators prioritized before exact; see <a href="https://github.com/Mottie/tablesorter/issues/465">issue #465</a>; order changed again in <span class="version updated">v2.17.1</span> to move "not match" before "exact" and allow for exact not matches; see <a href="https://github.com/Mottie/tablesorter/issues/628">issue #628</a>). In <span class="version updated">v2.22.2</span>, the "or" and "and" types can combine any of the other filter types together.<br>
|
||||
@ -807,7 +807,7 @@ $.extend($.tablesorter.language, {
|
||||
<h1>Demo</h1>
|
||||
<button type="button" class="toggle fsw">Toggle</button> filter_startsWith : <span id="start">false</span> (if true, search from beginning of cell content only)<br>
|
||||
<button type="button" class="toggle fic">Toggle</button> filter_ignoreCase : <span id="case">true</span> (if false, the search will be case sensitive)<br>
|
||||
<button type="button" class="toggle ffm">Toggle</button> filter-match (if class name added to the "First Name" column, all "or" searches will only match the content; Search <button data-filter-column="1">alex|br*|c</button> in the First Name column (<span class="version">2.10.1</span>).
|
||||
<button type="button" class="toggle ffm">Toggle</button> filter-match (if class name added to the "First Name" column, all "or" searches will only match the content; Search <button type="button" data-filter-column="1">alex|br*|c</button> in the First Name column (<span class="version">2.10.1</span>).
|
||||
<hr>
|
||||
|
||||
<div id="demo">Search <button type="button" data-filter-column="5" data-filter-text="2?%">2?%</button> in the Discount column<br>
|
||||
|
||||
@ -783,7 +783,7 @@ $(function() {
|
||||
<span class="demo-label">Animals column:</span> <div id="slider1"></div> <span class="animalclass"></span><br>
|
||||
<span class="demo-label">Date column:</span> <div id="slider2"></div> <span class="dateclass"></span><sup class="results">†</sup>
|
||||
<br><br>
|
||||
<button class="group_reset">Reset Saved Collapsed Groups</button>
|
||||
<button type="button" class="group_reset">Reset Saved Collapsed Groups</button>
|
||||
<div id="demo"><table id="groups">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
@ -264,7 +264,7 @@ headerTitle_output_nosort : 'No sort available'</pre>
|
||||
<div id="demo">
|
||||
|
||||
<h3>Tooltip plugin using togglable aria-label text</h3>
|
||||
<button>use aria-label</button>: <span id="usearia" class="bright">true</span>
|
||||
<button type="button">use aria-label</button>: <span id="usearia" class="bright">true</span>
|
||||
|
||||
<table id="table1">
|
||||
<thead>
|
||||
|
||||
@ -615,7 +615,7 @@ BAD => No minus (-) here! $#,###.00 or [-] here either <= BAD</textarea>
|
||||
Value to use: <input class="value" type="text" value="1234567.8955" /><br>
|
||||
Prefix: <input class="prefix" type="text" value='<span class="red">{content}</span>' /> ( add <code>{content}</code> to include the mask prefix )<br>
|
||||
Suffix: <input class="suffix" type="text" value='<span class="blue">{content}</span>' /> ( add <code>{content}</code> to include the mask suffix )<br>
|
||||
<button>Process</button>
|
||||
<button type="button">Process</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -506,7 +506,7 @@ table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
<li class="setsmtl"></li>
|
||||
<li class="setsmtp"></li>
|
||||
</ul>
|
||||
<button class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
|
||||
<button type="button" class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
|
||||
<div class="frame-wrapper full">
|
||||
<iframe src="example-widget-reflow1.html"></iframe>
|
||||
</div>
|
||||
@ -521,7 +521,7 @@ table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
<li class="setsmtl"></li>
|
||||
<li class="setsmtp"></li>
|
||||
</ul>
|
||||
<button class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
|
||||
<button type="button" class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
|
||||
<div class="frame-wrapper full">
|
||||
<iframe src="example-widget-reflow2.html"></iframe>
|
||||
</div>
|
||||
@ -536,7 +536,7 @@ table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
|
||||
<li class="setsmtl"></li>
|
||||
<li class="setsmtp"></li>
|
||||
</ul>
|
||||
<button class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
|
||||
<button type="button" class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
|
||||
<div class="frame-wrapper full">
|
||||
<iframe src="example-widget-reflow3.html"></iframe>
|
||||
</div>
|
||||
|
||||
@ -189,7 +189,7 @@ $(table).trigger('staticRowsRefresh');</pre>
|
||||
<h1>Demo</h1>
|
||||
<span class="label label-info">Note</span> Make any row static or normal by toggling the <code>static</code> class name using <kbd>Ctrl</kbd> + left click (<kbd>⌘</kbd> + click on Mac)<br>
|
||||
<div id="demo"><h3>Single tbody</h3>
|
||||
<p><button class="addrow">Add Row</button> Move "Iguana" row: <button class="move up">up</button> <button class="move">down</button></p>
|
||||
<p><button type="button" class="addrow">Add Row</button> Move "Iguana" row: <button type="button" class="move up">up</button> <button type="button" class="move">down</button></p>
|
||||
<table id="alphimals" class="tablesorter">
|
||||
<thead>
|
||||
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
|
||||
|
||||
@ -736,8 +736,8 @@ html[xmlns] .clearfix {
|
||||
'<section class="right">' +
|
||||
'<span class="price">{col4}</span>' +
|
||||
'<span class="darkview">' +
|
||||
'<button class="mybutton nohover" title="Read More..." >More</button>' +
|
||||
'<button class="mybutton nohover active" title="Add to Cart" >Add To Cart</button>' +
|
||||
'<button type="button" class="mybutton nohover" title="Read More..." >More</button>' +
|
||||
'<button type="button" class="mybutton nohover active" title="Add to Cart" >Add To Cart</button>' +
|
||||
'</span>' +
|
||||
'</section>' +
|
||||
'</li>',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user