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 widget: add filter_placeholder global settings. Fixes #582

Browse Source
This commit is contained in:
Mottie 2014-04-16 12:52:25 -05:00
parent c87b390c32
commit 094c17db12
5 changed files with 67 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/example-widget-filter-any-match.html
View File

@ -32,6 +32,7 @@
filter_external : '.search',
// include column filters
filter_columnFilters: true,
filter_placeholder: { search : 'Search...' },
filter_saveFilters : true,
filter_reset: '.reset'
}

26
docs/example-widget-filter-formatter-1.html
View File

@ -155,6 +155,12 @@
changeYear : true
});
}
},
// added v2.16
filter_placeholder : {
from : 'From...',
to : 'To...'
}
}
});
@ -178,7 +184,8 @@
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>In version <span class="version">v2.15.0</span> the following changes were made:
<li>In version <span class="version">v2.16.0</span>, the <code>filter_placeholder</code> option was added. See the jQuery UI Datepicker Range Selector section for more details.</li>
<li>In version <span class="version">v2.15.0</span>, the following changes were made:
<ul>
<li>These updated filter widget functions are not completely backward compatible with older versions of the filter widget. Please update both!</li>
<li>Added <code>compare</code> &amp; <code>selected</code> options:
@ -450,6 +457,19 @@
<h3><a href="#"><strong>jQuery UI Datepicker Range Selector</strong></a> <span class="xsmall">("Date (two inputs)" column)</span></h3>
<div>
<ul>
<li>In <span class="version">v2.16.0</span>, a <code>filter_placeholder</code> option was added:
<ul>
<li>The option adds a search input placeholder and select (first option) text, but it also includes placeholder text for both the "from" and "to" inputs</li>
<li>Set it as follows:
<pre class="prettyprint lang-js">filter_placeholder : {
search : '', // any default search inputs including the datepicker comparison
from : 'Date from...', // datepicker range "from" placeholder
to : 'Date to...' // datepicker range "to" placeholder
}
</pre></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>
</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>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 "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
@ -470,7 +490,7 @@
filter_formatter : {
// Date (two inputs)
6 : function($cell, indx){
5 : function($cell, indx){
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
// add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
// from : '8/1/2013', // starting date
@ -549,7 +569,7 @@
<th>Total (range)</th>
<th>Discount</th>
<th data-placeholder="Try 1/18/2013">Date (one input)</th>
<th data-placeholder-from="start date" data-placeholder-to="end date">Date (two inputs; range)</th>
<th>Date (two inputs; range)</th>
</tr>
</thead>
<tbody>

32
docs/index.html
View File

@ -1555,6 +1555,8 @@ $(function(){
filter_liveSearch : true,
// a selector in a header with this class name will only show selected options in the drop down
filter_onlyAvail : 'filter-onlyAvail',
// default placeholder text (overridden by any header "data-placeholder" setting)
filter_placeholder : { search : '', select : '' },
// jQuery selector string of an element used to reset the filters.
filter_reset : null,
// Use the $.tablesorter.storage utility to save the most recent filters
@ -2217,6 +2219,36 @@ $(function(){
<td><a href="example-widget-filter-custom.html">Example</a></td>
</tr>
<tr id="widget-filter-placeholder">
<td><a href="#" class="permalink">filter_placeholder</a></td>
<td>object</td>
<td>{ search : '', select : '' }</td>
<td>
Filter widget: Set global filter input placeholder text for search inputs and selects (<span class="version">v2.16</span>).
<div class="collapsible">
<br>
Any search type input added to the filter row will automatically get a placeholder attribute added, the source of this placeholder text is from the following sources, in order of priority:
<ul>
<li>Header cell data (<code>table.config.$headers.eq(0).data('placeholder', 'search for...');</code></li>
<li>Header cell data-attribute (<code>&lt;th data-placeholder="Find Rank..."&gt;Rank&lt;/th&gt;</code>)</li>
<li>Global <code>filter_placeholder.search</code> setting.</li>
</ul>
The <code>filter_placeholder.select</code> setting adds the text to the first select option (default option to show all rows).<br>
<br>
<span class="label label-info">Note:</span> The <code>jquery.tablesorter.widgets-filter-formatter.js</code> jQuery UI Datepicker Range Selector creates two inputs, so this option then includes two additional settings:<br>
<br>
<pre class="prettyprint lang-js">filter_placeholder : {
search : '',
select : '',
from : '', // datepicker range "from" placeholder
to : '' // datepicker range "to" placeholder
}
</pre><span class="label label-info">Note:</span> The browser must support the <a href="http://caniuse.com/#feat=input-placeholder">placeholder attribute</a> before it will be visible.
</div>
</td>
<td><a href="example-widget-filter-formatter-1.html">Example</a></td>
</tr>
<tr id="widget-filter-reset">
<td><a href="#" class="permalink">filter_reset</a></td>
<td>String, jQuery object</td>

9
js/jquery.tablesorter.widgets-filter-formatter.js
View File

@ -20,6 +20,7 @@ var ts = $.tablesorter || {},
// compare option selector class name (jQuery selector)
compareSelect = '.compare-select',
tsff = ts.filterFormatter = {
addCompare: function($cell, indx, options){
@ -539,7 +540,7 @@ tsff = ts.filterFormatter = {
// Add date range picker
t = '<input type="text" class="date date' + indx + '" placeholder="' +
($hdr.data('placeholder') || $hdr.attr('data-placeholder') || '') + '" />';
($hdr.data('placeholder') || $hdr.attr('data-placeholder') || c.widgetOptions.filter_placeholder.search || '') + '" />';
$date = $(t).appendTo($cell);
// add callbacks; preserve added callbacks
@ -650,8 +651,10 @@ tsff = ts.filterFormatter = {
// make sure we're using parsed dates in the search
$hdr = $cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');
// Add date range picker
t = '<label>' + o.textFrom + '</label><input type="text" class="dateFrom" placeholder="' + ($hdr.attr('data-placeholder-from') || '') + '" />' +
'<label>' + o.textTo + '</label><input type="text" class="dateTo" placeholder="' + ($hdr.attr('data-placeholder-to') || '') + '" />';
t = '<label>' + o.textFrom + '</label><input type="text" class="dateFrom" placeholder="' +
($hdr.data('placeholderFrom') || $hdr.attr('data-placeholder-from') || c.widgetOptions.filter_placeholder.from || '') + '" />' +
'<label>' + o.textTo + '</label><input type="text" class="dateTo" placeholder="' +
($hdr.data('placeholderTo') || $hdr.attr('data-placeholder-to') || c.widgetOptions.filter_placeholder.to || '') + '" />';
$(t).appendTo($cell);
// add callbacks; preserve added callbacks

9
js/jquery.tablesorter.widgets.js
View File

@ -360,6 +360,7 @@ ts.addWidget({
filter_ignoreCase : true, // if true, make all searches case-insensitive
filter_liveSearch : true, // if true, search column content while the user types (with a delay)
filter_onlyAvail : 'filter-onlyAvail', // a header with a select dropdown & this class name will only show available (visible) options within the drop down
filter_placeholder : { search : '', select : '' }, // default placeholder text (overridden by any header "data-placeholder" setting)
filter_reset : null, // jQuery selector string of an element used to reset the filters
filter_saveFilters : false, // Use the $.tablesorter.storage utility to save the most recent filters
filter_searchDelay : 300, // typing delay in milliseconds before starting a search
@ -612,7 +613,7 @@ ts.filter = {
for (string in wo.filter_functions[column]) {
if (typeof string === 'string') {
options += options === '' ?
'<option value="">' + ($header.data('placeholder') || $header.attr('data-placeholder') || '') + '</option>' : '';
'<option value="">' + ($header.data('placeholder') || $header.attr('data-placeholder') || wo.filter_placeholder.select || '') + '</option>' : '';
options += '<option value="' + string + '">' + string + '</option>';
}
}
@ -723,7 +724,7 @@ ts.filter = {
buildFilter = $('<input type="search">').appendTo( c.$filters.eq(column) );
}
if (buildFilter) {
buildFilter.attr('placeholder', $header.data('placeholder') || $header.attr('data-placeholder') || '');
buildFilter.attr('placeholder', $header.data('placeholder') || $header.attr('data-placeholder') || wo.filter_placeholder.search || '');
}
}
if (buildFilter) {
@ -733,7 +734,7 @@ ts.filter = {
wo.filter_cssFilter ) || '';
buildFilter.addClass( ts.css.filter + ' ' + name ).attr('data-column', column);
if (disabled) {
buildFilter.addClass('disabled')[0].disabled = true; // disabled!
buildFilter.attr('placeholder', '').addClass('disabled')[0].disabled = true; // disabled!
}
}
}
@ -1031,7 +1032,7 @@ ts.filter = {
arry = [],
node = c.$headers.filter('[data-column="' + column + '"]:last'),
// t.data('placeholder') won't work in jQuery older than 1.4.3
options = '<option value="">' + ( node.data('placeholder') || node.attr('data-placeholder') || '' ) + '</option>';
options = '<option value="">' + ( node.data('placeholder') || node.attr('data-placeholder') || wo.filter_placeholder.select || '' ) + '</option>';
for (tbodyIndex = 0; tbodyIndex < $tbodies.length; tbodyIndex++ ) {
if (!$tbodies.eq(tbodyIndex).hasClass(c.cssInfoBlock)) {
len = c.cache[tbodyIndex].row.length;