Docs: Add button type

It's the OCD I tell ya!
This commit is contained in:
Rob Garrison 2016-07-08 14:08:21 -05:00
parent c036d0dcda
commit 7268e9ab34
No known key found for this signature in database
GPG Key ID: 0A42D160D71978E1
17 changed files with 56 additions and 56 deletions

View File

@ -573,10 +573,10 @@
<hr> <hr>
<h3 id="child-by-column">childByColumn</h3> <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> <ul>
<li>This option requires the <code>filter_childRow</code> option to be set to <code>true</code> in order to work.</li> <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">&lt;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">&lt;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>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> <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> </ul>

View File

@ -119,7 +119,7 @@
Search: Search:
<input type="search" class="search" data-column="all" placeholder="Search all columns"><sup class="results xsmall">&Dagger;</sup> <input type="search" class="search" data-column="all" placeholder="Search all columns"><sup class="results xsmall">&Dagger;</sup>
<button class="reset">Reset</button> <button type="button" class="reset">Reset</button>
<code id="show-filter"></code> <code id="show-filter"></code>
<p class="xsmall"><span class="results">&dagger;</span> The reason for this issue is that the filter input in the index column has this setting: <p class="xsmall"><span class="results">&dagger;</span> The reason for this issue is that the filter input in the index column has this setting:

View File

@ -81,7 +81,7 @@
<div id="main"> <div id="main">
<p id="settings" class="hidden"> <p id="settings" class="hidden">
Delay init is <em class="status">enabled</em>. 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> first sorting time in each case.</p>
<p class="tip"> <p class="tip">
<em>NOTE!</em> If firebug is installed the debuging information will be displayed in the firebug console. Watch for <em>NOTE!</em> If firebug is installed the debuging information will be displayed in the firebug console. Watch for

View File

@ -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> <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> </ul>
<h1>Triggered Events &nbsp; <button class="clear">Clear</button></h1> <h1>Triggered Events &nbsp; <button type="button" class="clear">Clear</button></h1>
<ul id="display"> <ul id="display">
<li>Pager events will appear here.</li> <li>Pager events will appear here.</li>
<li>&nbsp;</li> <li>&nbsp;</li>

View File

@ -130,7 +130,7 @@ $.tablesorter.fileTypes.equivalents["Fonts"] += '|svg'; // just add it to the en
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"> <div id="demo">
<button>Switch</button> (switch media column between "group-separator-1" &amp; "group-separator-2") <button type="button">Switch</button> (switch media column between "group-separator-1" &amp; "group-separator-2")
<table class="tablesorter"> <table class="tablesorter">
<thead> <thead>

View File

@ -117,12 +117,12 @@ Basic Asc/Desc sort
<div class="block"> <div class="block">
<div class="left box" data-id="1"> <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> <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> 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> <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 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 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,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> <pre class="prettyprint lang-js updating">$("#table1").trigger("sorton", [ [] ]);</pre>
<small>* <code>"a"</code> &amp; <code>"d"</code> values added <span class="version">v2.17.0</span>.</small> <small>* <code>"a"</code> &amp; <code>"d"</code> values added <span class="version">v2.17.0</span>.</small>
</div> </div>
@ -151,17 +151,17 @@ Toggle Sort (Next)
<div class="block"> <div class="block">
<div class="left box" data-id="2"> <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> <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> 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> <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> <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 type="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"],[1,"n"]]'>Asc/Desc</button> (<code>[[0,"n"],[1,"n"]]</code>; columns are independent)
<pre class="prettyprint lang-js updating">$("#table2").trigger("sorton", [ [] ]);</pre> <pre class="prettyprint lang-js updating">$("#table2").trigger("sorton", [ [] ]);</pre>
<small>* <code>"n"</code> value added <span class="version">v2.17.0</span>.</small> <small>* <code>"n"</code> value added <span class="version">v2.17.0</span>.</small>
</div> </div>
@ -189,19 +189,19 @@ Sort Same/Opposite
--> -->
<div class="block"> <div class="block">
<div class="left box" data-id="3"> <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> <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> 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> <br>
<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,"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 type="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 type="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 type="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 type="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 type="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 type="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,"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> <pre class="prettyprint lang-js updating">$("#table3").trigger("sorton", [ [] ]);</pre>
<small>* <code>"s"</code> &amp; <code>"o"</code> values added <span class="version">v2.17.0</span>.</small> <small>* <code>"s"</code> &amp; <code>"o"</code> values added <span class="version">v2.17.0</span>.</small>
</div> </div>

View File

@ -507,8 +507,8 @@ td.editable_updated {
<p></p> <p></p>
<h1>Demo</h1> <h1>Demo</h1>
<button class="auto">Toggle</button> <code>editable_autoAccept&nbsp;&nbsp;&nbsp;&nbsp;: <span>true</span></code><br> <button type="button" class="auto">Toggle</button> <code>editable_autoAccept&nbsp;&nbsp;&nbsp;&nbsp;: <span>true</span></code><br>
<button class="enter">Toggle</button> <code>editable_enterToAccept : <span>true</span></code> <button type="button" class="enter">Toggle</button> <code>editable_enterToAccept : <span>true</span></code>
<br> <br>
<div id="demo"><table id="table" class="tablesorter"> <div id="demo"><table id="table" class="tablesorter">

View File

@ -239,7 +239,7 @@
}</pre></li> }</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>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 &quot;i&quot; flag.</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 &quot;i&quot; 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> <li>See the filter function information below for more details about the function parameters.</li>
</ul> </ul>
</div> </div>

View File

@ -223,10 +223,10 @@
<li>Added <code>endOfDay</code> option for jQuery UI Datepicker. <li>Added <code>endOfDay</code> option for jQuery UI Datepicker.
<ul> <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>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">&lt;= 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 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">&lt;= 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 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>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> <li>This option is available in both the comparison (one input) and range (two inputs; "to" date input only) date pickers.</li>
</ul> </ul>
</li> </li>
@ -407,8 +407,8 @@
<li>In <span class="version">v2.15.0</span> <li>In <span class="version">v2.15.0</span>
<ul> <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>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>&lt;=</code> comparison is made, will include all times within the selected day. Try searching for <button data-column="4" data-value="<=1/14/2014">&lt;= 1/14/2014</button>; it basically sets the time of the selected day to end at 23:59:59.</li> <li>A <code>endOfDay</code> option was added, which when a <code>&lt;=</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">&lt;= 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>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> </ul>
<br> <br>
</li> </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> <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> </ul>
</li> </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>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>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> <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>

View File

@ -173,7 +173,7 @@
<p></p> <p></p>
<h1>Demo</h1> <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"> <table class="tablesorter">
<thead> <thead>
<tr> <tr>

View File

@ -253,7 +253,7 @@ $(function(){
<ul> <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="#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>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">&lt20 or &gt;40</button> or <button data-filter-column="3">&gt;20 && &lt;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">&lt20 or &gt;40</button> or <button type="button" data-filter-column="3">&gt;20 && &lt;40</button></li>
</ul> </ul>
</li> </li>
</ul> </ul>
@ -311,17 +311,17 @@ $(function(){
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr><td class="center">1</td><td class="center"><code>|</code> or <code>&nbsp;OR&nbsp;</code></td><td>Logical &quot;or&quot; (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 &quot;box&quot; or &quot;bat&quot;);<button data-filter-column="1">Alex|Peter</button> (Find text that contains either &quot;Alex&quot; or &quot;Peter&quot;); <button data-filter-column="3">&lt20 or &gt;40</button></td></tr> <tr><td class="center">1</td><td class="center"><code>|</code> or <code>&nbsp;OR&nbsp;</code></td><td>Logical &quot;or&quot; (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 &quot;box&quot; or &quot;bat&quot;);<button type="button" data-filter-column="1">Alex|Peter</button> (Find text that contains either &quot;Alex&quot; or &quot;Peter&quot;); <button type="button" data-filter-column="3">&lt20 or &gt;40</button></td></tr>
<tr><td class="center">2</td><td class="center"><code>&nbsp;&&&nbsp;</code> or <code>&nbsp;AND&nbsp;</code></td><td>Logical &quot;and&quot;. 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 &quot;box&quot; and &quot;bat&quot;), <button data-filter-column="1">Br && c</button> (Find text that contains both &quot;br&quot; and &quot;c&quot;), <button data-filter-column="3">&gt;20 && &lt;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">2</td><td class="center"><code>&nbsp;&&&nbsp;</code> or <code>&nbsp;AND&nbsp;</code></td><td>Logical &quot;and&quot;. 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 &quot;box&quot; and &quot;bat&quot;), <button type="button" data-filter-column="1">Br && c</button> (Find text that contains both &quot;br&quot; and &quot;c&quot;), <button type="button" data-filter-column="3">&gt;20 && &lt;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 &quot;bag&quot;, &quot;beg&quot;, &quot;BIG&quot;, &quot;Bug&quot;, etc);<button data-filter-column="1">/r$/</button> (matches text that ends with an &quot;r&quot;)</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 &quot;bag&quot;, &quot;beg&quot;, &quot;BIG&quot;, &quot;Bug&quot;, etc);<button type="button" data-filter-column="1">/r$/</button> (matches text that ends with an &quot;r&quot;)</td></tr>
<tr><td class="center">4</td><td class="center"><code>&lt; &lt;= &gt;= &gt;</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">&gt;= 10</button> (find values greater than or equal to 10)</td></tr> <tr><td class="center">4</td><td class="center"><code>&lt; &lt;= &gt;= &gt;</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">&gt;= 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>&quot;</code>) to exactly <em>not</em> match a filter (<span class="version">v2.17.1</span>).</td><td><code>!fe</code> (hide rows with &quot;female&quot; in that column, but shows rows with &quot;male&quot;);<button data-filter-column="1">!a</button> (find text that doesn't contain an &quot;a&quot;);<button data-filter-column="1">!"Bruce"</button> (find content that does not exactly match "Bruce")</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>&quot;</code>) to exactly <em>not</em> match a filter (<span class="version">v2.17.1</span>).</td><td><code>!fe</code> (hide rows with &quot;female&quot; in that column, but shows rows with &quot;male&quot;);<button type="button" data-filter-column="1">!a</button> (find text that doesn't contain an &quot;a&quot;);<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>&quot;</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&quot;</code> or <code>abc=</code> (exactly match &quot;abc&quot;);<button data-filter-column="1">John&quot;</button> or <button data-filter-column="1">John=</button> (exactly match &quot;John&quot;)</td></tr> <tr><td class="center">6</td><td class="center"><code>&quot;</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&quot;</code> or <code>abc=</code> (exactly match &quot;abc&quot;);<button type="button" data-filter-column="1">John&quot;</button> or <button type="button" data-filter-column="1">John=</button> (exactly match &quot;John&quot;)</td></tr>
<tr><td class="center">7</td><td class="center"><code>&nbsp;-&nbsp;</code> or <code>&nbsp;to&nbsp;</code></td><td>Find a range of values. Make sure there is a space before and after the dash (or the word &quot;to&quot;) <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">7</td><td class="center"><code>&nbsp;-&nbsp;</code> or <code>&nbsp;to&nbsp;</code></td><td>Find a range of values. Make sure there is a space before and after the dash (or the word &quot;to&quot;) <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 &quot;Jan&quot; and &quot;Jun&quot;, but not &quot;Joan&quot;);<button data-filter-column="2">a?s</button> (finds &quot;Dumass&quot; and &quot;Evans&quot;, but not &quot;McMasters&quot;)</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 &quot;Jan&quot; and &quot;Jun&quot;, but not &quot;Joan&quot;);<button type="button" data-filter-column="2">a?s</button> (finds &quot;Dumass&quot; and &quot;Evans&quot;, but not &quot;McMasters&quot;)</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 &quot;Black&quot; and &quot;Book&quot;);<button data-filter-column="2">a*s</button> (matches &quot;Dumass&quot;, &quot;Evans&quot; and &quot;McMasters&quot;)</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 &quot;Black&quot; and &quot;Book&quot;);<button type="button" data-filter-column="2">a*s</button> (matches &quot;Dumass&quot;, &quot;Evans&quot; and &quot;McMasters&quot;)</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 &quot;Bruce Lee&quot; and &quot;Brenda Dexter&quot;), or <button data-filter-column="1">~piano</button> (matches &quot;Philip Aaron Wong&quot;)</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 &quot;Bruce Lee&quot; and &quot;Brenda Dexter&quot;), or <button type="button" data-filter-column="1">~piano</button> (matches &quot;Philip Aaron Wong&quot;)</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 &quot;abc&quot;, &quot;abcd&quot;, &quot;abcde&quot;, etc);<button data-filter-column="1">Aaron</button> (finds &quot;Aaron&quot; and &quot;Philip Aaron Wong&quot;)</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 &quot;abc&quot;, &quot;abcd&quot;, &quot;abcde&quot;, etc);<button type="button" data-filter-column="1">Aaron</button> (finds &quot;Aaron&quot; and &quot;Philip Aaron Wong&quot;)</td></tr>
</tbody> </tbody>
</table> </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> <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> <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 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 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> <hr>
<div id="demo">Search <button type="button" data-filter-column="5" data-filter-text="2?%">2?%</button> in the Discount column<br> <div id="demo">Search <button type="button" data-filter-column="5" data-filter-text="2?%">2?%</button> in the Discount column<br>

View File

@ -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">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">&dagger;</sup> <span class="demo-label">Date column:</span> <div id="slider2"></div> <span class="dateclass"></span><sup class="results">&dagger;</sup>
<br><br> <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"> <div id="demo"><table id="groups">
<thead> <thead>
<tr> <tr>

View File

@ -264,7 +264,7 @@ headerTitle_output_nosort : 'No sort available'</pre>
<div id="demo"> <div id="demo">
<h3>Tooltip plugin using togglable aria-label text</h3> <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"> <table id="table1">
<thead> <thead>

View File

@ -615,7 +615,7 @@ BAD =&gt; No minus (-) here! $#,###.00 or [-] here either &lt;= BAD</textarea>
Value to use: <input class="value" type="text" value="1234567.8955" /><br> 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> 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> 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>
</div> </div>

View File

@ -506,7 +506,7 @@ table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
<li class="setsmtl"></li> <li class="setsmtl"></li>
<li class="setsmtp"></li> <li class="setsmtp"></li>
</ul> </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"> <div class="frame-wrapper full">
<iframe src="example-widget-reflow1.html"></iframe> <iframe src="example-widget-reflow1.html"></iframe>
</div> </div>
@ -521,7 +521,7 @@ table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
<li class="setsmtl"></li> <li class="setsmtl"></li>
<li class="setsmtp"></li> <li class="setsmtp"></li>
</ul> </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"> <div class="frame-wrapper full">
<iframe src="example-widget-reflow2.html"></iframe> <iframe src="example-widget-reflow2.html"></iframe>
</div> </div>
@ -536,7 +536,7 @@ table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top {
<li class="setsmtl"></li> <li class="setsmtl"></li>
<li class="setsmtp"></li> <li class="setsmtp"></li>
</ul> </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"> <div class="frame-wrapper full">
<iframe src="example-widget-reflow3.html"></iframe> <iframe src="example-widget-reflow3.html"></iframe>
</div> </div>

View File

@ -189,7 +189,7 @@ $(table).trigger('staticRowsRefresh');</pre>
<h1>Demo</h1> <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>&#8984;</kbd> + click on Mac)<br> <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>&#8984;</kbd> + click on Mac)<br>
<div id="demo"><h3>Single tbody</h3> <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"> <table id="alphimals" class="tablesorter">
<thead> <thead>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr> <tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>

View File

@ -736,8 +736,8 @@ html[xmlns] .clearfix {
'<section class="right">' + '<section class="right">' +
'<span class="price">{col4}</span>' + '<span class="price">{col4}</span>' +
'<span class="darkview">' + '<span class="darkview">' +
'<button class="mybutton nohover" title="Read More..." >More</button>' + '<button type="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 active" title="Add to Cart" >Add To Cart</button>' +
'</span>' + '</span>' +
'</section>' + '</section>' +
'</li>', '</li>',