Docs: More notes about .filtered {display:none}. See #1172

This commit is contained in:
Rob Garrison 2016-03-08 15:43:17 -06:00
parent bfee55735f
commit c6514a7671
3 changed files with 20 additions and 6 deletions

View File

@ -449,9 +449,15 @@ $(function(){
</tr>
<tr id="filter-filtered-row">
<td><span class="permalink">filter_filteredRow</span></td>
<td><a href="#" class="permalink">filter_filteredRow</a></td>
<td>'filtered'</td>
<td>Css class name added to filtered rows (rows that are not showing); needed by pager plugin.</td>
<td>
CSS class name added to filtered rows (rows that are not showing); needed by pager plugin.
<div class="collapsible">
<br>
If modifying this definition, make sure that the new class is set to <code>display: none;</code> to hide the filtered rows.
</div>
</td>
</tr>
<tr id="filter-formatter">

View File

@ -1508,7 +1508,11 @@ From the example function above, you'll end up with something similar to this HT
<td>&quot;default&quot;</td>
<td>This option will add a theme css class name to the table <code>&quot;tablesorter-{theme}&quot;</code> for styling (v2.4; <span class="version updated">v2.18.0</span>).
<div class="collapsible">
<br>When changing this theme option (the actual theme name is inside parentheses), make sure that the appropriate css theme file has also been loaded. Included theme files include:
<br>
<span class="label alert">*NOTE*</span> If creating a custom theme file, make sure to include a filter definition to hide filtered out rows:
<pre class="prettyprint lang-css">.filtered { display: none; }</pre>
<p><span class="label label-info">Note</span> the <code>.filtered</code> class can be modified using the <a href="#widget-filter-filteredrow"><code>filter_filteredRow</code> option</a>.</p>
When changing this theme option (the actual theme name is inside parentheses), make sure that the appropriate css theme file has also been loaded. Default theme files include:
<a href="themes.html" target="_blank" title="open themes in a new window">see all themes</a><br>
<iframe style="width:100%;height:300px;" src="themes.html"></iframe>
<hr>
@ -1881,7 +1885,7 @@ $(function(){
filter_excludeFilter : {},
// jQuery selector string (or jQuery object) of external search inputs
filter_external : '',
// class added to filtered rows; needed by pager plugin
// class added to filtered rows; define in css with "display:none" to hide the filtered-out rows
filter_filteredRow : 'filtered',
// add custom filter elements to the filter row
filter_formatter : null,
@ -2604,11 +2608,15 @@ filter_cssFilter : [ '', 'hidden', '', 'hidden' ]</pre>
</tr>
<tr id="widget-filter-filteredrow">
<td><span class="permalink">filter_filteredRow</span></td>
<td><a href="#" class="permalink">filter_filteredRow</a></td>
<td>String</td>
<td>&quot;filtered&quot;</td>
<td>
Filter widget: This is the class name applied to all rows that do not match the filter (hidden rows); used by pager plugin (<span class="version">v2.10</span>).
<div class="collapsible">
<br>
<span class="label alert">*NOTE*</span> If creating a custom theme, make sure to include this definition (set to <code>display:none</code> or the filter widget will appear to be broken!
</div>
</td>
<td></td>
</tr>

View File

@ -38,7 +38,7 @@
filter_defaultFilter : {}, // add a default column filter type '~{query}' to make fuzzy searches default; '{q1} AND {q2}' to make all searches use a logical AND.
filter_excludeFilter : {}, // filters to exclude, per column
filter_external : '', // jQuery selector string ( or jQuery object ) of external filters
filter_filteredRow : 'filtered', // class added to filtered rows; needed by pager plugin
filter_filteredRow : 'filtered', // class added to filtered rows; define in css with "display:none" to hide the filtered-out rows
filter_formatter : null, // add custom filter elements to the filter row
filter_functions : null, // add custom filter functions using this option
filter_hideEmpty : true, // hide filter row when table is empty