library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update filter widget docs to show filter precedence. See #441

Browse Source
This commit is contained in:
Mottie 2013-11-27 14:53:58 -06:00
parent 948e62168c
commit 6373f821d6
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/css/jq.css
View File

@ -49,7 +49,7 @@ form {font-size:10pt;margin-bottom:20px;width:auto;}
form fieldset {padding:10px;text-align:left;width:140px;}
div#main h1 {border-bottom:1px solid #cdcdcd;display:block;padding:4px 0 2px;}
table#tablesorter-demo {margin: 10px 0 0 0;}
table, p.small {font-size:small;}
table, p.small,.smallcode code {font-size:small;}
p.small {padding-left: 25px;}
p.tip em, div.tip em,.label-info {padding: 2px; background-color: #5bc0de; color: #fff; border-radius: .25em;}
.label { padding: 0.1em 0.6em 0.1em; font-size: 75%; color: #fff; border-radius: .25em; }

11
docs/example-widget-filter.html
View File

@ -204,10 +204,10 @@ $(function(){
<li>This widget does work with tablesorter v2.0.5.</li>
<li>Using the filters:
<table class="tablesorter-blue notes">
<thead><tr><th>Type <small class="bright">(1)</small></th><td>Description</th><th>Examples</th></tr></thead>
<thead><tr><th>Type <small class="bright">(1)(2)</small></th><td>Description</th><th>Examples</th></tr></thead>
<tbody>
<tr><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"><code>~</code></td><td>Fuzzy search (matches sequential characters) the query 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"><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"><code>&quot;</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"><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"><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>
@ -216,12 +216,13 @@ $(function(){
<tr><td class="center"><code>!</code></td><td>Not operator. Filter the column with content that <strong>do not</strong> match the query.</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;)</td></tr>
<tr><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;)</td></tr>
<tr><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">(3)</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;)</td></tr>
<tr><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">(2)</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"><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">(4)</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>
</tbody>
</table>
<span class="bright">(1)</span> You cannot combine these operators with each other (except for the wildcards).<br>
<span class="bright">(2)</span> In tablesorter <span class="version">v2.10</span>, comparisons can be made in date columns (if properly parsed).<br>
<span class="bright">(3)</span> Logical "or" comparisons can now show exact matches (by default; <span class="version">v2.10.1</span>) or just match cell contents.
<span class="bright">(2)</span> The filter order (or precendence) of how searches are checked is as follows: <span class="smallcode">regex (<code>/\d/</code>) <strong>&gt;</strong> exact (<code>"</code>) <strong>&gt;</strong> not match (<code>!</code>) <strong>&gt;</strong> operators (<code>&lt; &lt;= &gt;= &gt;</code>) <strong>&gt;</strong> and (<code>&nbsp;AND&nbsp;</code>) <strong>&gt;</strong> range (<code>&nbsp;-&nbsp;</code>) <strong>&gt;</strong> wild/or (<code>?</code>, <code>*</code> and <code>&nbsp;OR&nbsp;</code>) <strong>&gt;</strong> fuzzy (<code>~</code>); so an exact match will override "and", "or" and "range" searches </span><br>
<span class="bright">(3)</span> Logical "or" comparisons can now show exact matches (by default; <span class="version">v2.10.1</span>) or just match cell contents.<br>
<span class="bright">(4)</span> In tablesorter <span class="version">v2.10</span>, comparisons can be made in date columns (if properly parsed).
</li>
</ul>
</div>