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

Filter: Add filter_filterLabel to support filter input ARIA labels. See #1495

Browse Source
This commit is contained in:
Rob Garrison 2018-01-16 18:20:51 -06:00
parent 3c127e1125
commit ea00c14288
4 changed files with 76 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/js/widgets/widget-filter.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@ -83,6 +83,10 @@
// class added to filtered rows (rows that are not showing); needed by pager plugin
filter_filteredRow : 'filtered',
// ARIA-label added to filter input/select; {{label}} is replaced by the column header
// "data-label" attribute, if it exists, or it uses the column header text
filter_filterLabel : 'Filter "{{label}}" column by...',
// add custom filter elements to the filter row
// see the filter formatter demos for more specifics
filter_formatter : null,
@ -251,6 +255,7 @@ $(function(){
<h3 id="notes"><a href="#">Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.29.4</span>, <code>filter_filterLabel</code> option was added to include an ARIA-label to the filter inputs and selects.</li>
<li>In <span class="verison">v2.27.3</span>, <code>filter_liveSearch</code> will now accept an object containing zero-based column indexes or header class names.</li>
<li>In <span class="verison">v2.26.6</span>, the <a class="intlink" href="#filter-hidefilters"><code>hideFilters</code></a> setting will now accept a function to determine when to hide the filter row.</li>
<li>In <span class="version">v2.25.6</span>, added <a class="intlink" href="#methods"><code>filterResetSaved</code></a> method to clear stored filter values.</li>
@ -466,6 +471,20 @@ $(function(){
</td>
</tr>
<tr id="filter-filter-label">
<td><a href="#" class="permalink">filter_filterLabel</a></td>
<td>'Filter "{{label}}" column by...'</td>
<td>
This option contains the ARIA-label value to be added to the filter input or select (<span class="version">v2.29.4</span>).
<div class="collapsible">
<p>
By default, a <code>{{label}}</code> is included in the setting to insert a column label. The content is obtained from the header cell's <code>data-label</code> attribute (do not include the <code>data-</code> prefix), if it exists, or the column header text. See the "First Name" column below for an example.
</p>
<span class="label label-info">Note</span> See the <a href="index.html#filter-filter-label">main page documentation for more important details</a>!
</div>
</td>
</tr>
<tr id="filter-formatter">
<td><a href="#" class="permalink">filter_formatter</a></td>
<td>null</td>
@ -829,7 +848,7 @@ $.extend($.tablesorter.language, {
<tr>
<!-- you can also add a placeholder using script; $('.tablesorter th:eq(0)').data('placeholder', 'hello') -->
<th data-placeholder="" class="filter-false">Rank</th>
<th data-placeholder="Try B*{space} or alex|br*|c" class="filter-match">First Name (<span></span> filter-match )</th>
<th data-placeholder="Try B*{space} or alex|br*|c" data-label="First Name" data-test="" class="filter-match">First Name (<span></span> filter-match )</th>
<th data-placeholder="Try <d">Last Name</th>
<th data-placeholder="Try >=33">Age</th>
<th data-placeholder="Try <9.99">Total</th>

39
docs/index.html
View File

@ -465,9 +465,9 @@
<li><a href="example-widget-editable.html">Content editable widget</a> (v2.9; <span class="version updated">v2.28.7</span>).</li>
<li><a href="example-widget-current-sort.html">Current Sort Widget</a> (<span class="version">v2.27.0</span>).</li>
<li><span class="label label-info">Beta</span> <a href="example-dragtable.html">Dragtable mod</a> - (jQuery UI widget for column reordering [<a class="external" href="http://stackoverflow.com/a/27770224/145346">ref</a>]; <span class="version">v2.24.0</span>).</li>
<li><span class="results">&dagger;</span> Filter widget (<span class="version updated">v2.29.2</span>):
<li><span class="results">&dagger;</span> Filter widget (<span class="version updated">v2.29.4</span>):
<ul>
<li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.26.6</span>).</li>
<li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.29.4</span>).</li>
<li><a href="example-widget-filter-any-match.html">external option (match any column)</a> (<span class="version">v2.13.3</span>; <span class="version updated">v2.27.5</span>).</li>
<li><a href="example-widget-filter-external-inputs.html">external inputs</a> (<span class="version">v2.14</span>; <span class="version updated">v2.18.0</span>).</li>
<li><a href="example-widget-filter-custom.html">custom filter functions</a> (v2.3.6; <span class="version updated">v2.22.0</span>).</li>
@ -1976,6 +1976,11 @@ $(function(){
// class added to filtered rows; needed by pager plugin
filter_filteredRow: 'filtered',
// ARIA-label added to filter input/select; {{label}} is replaced by
// the column header "data-label" attribute, if it exists, or it uses the
// column header text
filter_filterLabel : 'Filter "{{label}}" column by...',
// add custom filter elements to the filter row
filter_formatter: null,
@ -2833,6 +2838,36 @@ filter_cellFilter : [ '', 'hidden', '', 'hidden' ]</pre>
<td></td>
</tr>
<tr id="widget-filter-filterlabel">
<td><a href="#" class="permalink">filter_filterLabel</a></td>
<td>String</td>
<td>'Filter "{{label}}" column by...'</td>
<td>
This option contains the ARIA-label value to be added to the filter input or select (<span class="version">v2.29.4</span>).
<div class="collapsible">
<p>
By default, a <code>{{label}}</code> is included in the setting to insert a column label. The content is obtained from the header cell's <code>data-label</code> attribute (do not include the <code>data-</code> prefix), if it exists, or the column header text. See the "First Name" column on the example page.
</p>
<p>
More complex labels may be included by adding multiple "data-attributes". For example, the following option:
<pre class="pretty-print lang-js">filter_filterLabel : 'Filter the {{column-name}}, the {{ordinal-number}} column{{label-extra}}{{default-filter}}'</pre>
with this header cell HTML
<pre class="pretty-print lang-html">&lt;th data-column-name="last name" data-ordinal-number="second" data-default-filter=", using a fuzzy search" data-label-extra=""&gt;
Last
&lt;th&gt;</pre>
would result in an ARIA-label of <code>'Filter the last name, the second column, using a fuzzy search'</code>
</p>
<span class="label label-info">Note:</span>
<ul>
<li>The <code>data-</code> prefix must not be added in the placeholders.</li>
<li>The empty <code>data-label-extra</code> attribute did add any content to the resulting label.</li>
<li>If an included data-attribute does not exist on the header, it will be replaced by the header text.</li>
</ul>
</div>
</td>
<td><a href="example-widget-filter.html#demo">Example</a></td>
</tr>
<tr id="widget-filter-formatter">
<td><a href="#" class="permalink">filter_formatter</a></td>
<td>Object</td>

20
js/widgets/widget-filter.js
View File

@ -40,6 +40,7 @@
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; define in css with "display:none" to hide the filtered-out rows
filter_filterLabel : 'Filter "{{label}}" column by...', // Aria-label added to filter input/select; see #1495
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
@ -696,7 +697,7 @@
cellFilter = wo.filter_cellFilter,
columns = c.columns,
arry = $.isArray( cellFilter ),
buildFilter = '<tr role="row" class="' + tscss.filterRow + ' ' + c.cssIgnoreRow + '">';
buildFilter = '<tr role="search" class="' + tscss.filterRow + ' ' + c.cssIgnoreRow + '">';
for ( column = 0; column < columns; column++ ) {
if ( c.$headerIndexed[ column ].length ) {
// account for entire column set with colspan. See #1047
@ -765,7 +766,22 @@
( typeof wo.filter_cssFilter[column] !== 'undefined' ? wo.filter_cssFilter[column] || '' : '' ) :
wo.filter_cssFilter ) || '';
// copy data-column from table cell (it will include colspan)
buildFilter.addClass( tscss.filter + ' ' + name ).attr( 'data-column', $filter.attr( 'data-column' ) );
buildFilter.addClass( tscss.filter + ' ' + name );
name = wo.filter_filterLabel;
tmp = name.match(/{{([^}]+?)}}/g);
if (!tmp) {
tmp = ['{{label}}'];
}
$.each(tmp, function(indx, attr) {
var regex = new RegExp(attr, 'g'),
data = $header.attr('data-' + attr.replace(/{{|}}/g, '')),
text = typeof data === 'undefined' ? $header.text() : data;
name = name.replace( regex, $.trim( text ) );
});
buildFilter.attr({
'data-column': $filter.attr( 'data-column' ),
'aria-label': name
});
if ( disabled ) {
buildFilter.attr( 'placeholder', '' ).addClass( tscss.filterDisabled )[0].disabled = true;
}