From 3a42cad334fa3ff90fb700f86364201f20098856 Mon Sep 17 00:00:00 2001 From: Piero Wbmstr Date: Sat, 22 Mar 2014 09:36:09 +0100 Subject: [PATCH] New "dataFilterValue" and "dataNoFilter" options to allow filtering using "data-" HTML5 attributes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - adding the « dataFilterValue » and « dataNoFilter » options in js filtering - new « filtertable-sample-data-filtering.html » example - new options in the README for data options how-to --- README.md | 2 + .../filtertable-sample-data-attributes.html | 91 +++++++++++++++++++ jquery.filtertable.js | 34 ++++++- jquery.filtertable.min.js | 4 +- 4 files changed, 125 insertions(+), 6 deletions(-) create mode 100644 examples/filtertable-sample-data-attributes.html diff --git a/README.md b/README.md index ea0b779..de820e4 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,8 @@ $('table').filterTable(); //if this code appears after your tables; otherwise, i | `quickListGroupTag` | string | '' | Tag name surrounding quick list items (e.g., `ul`) | | `quickListTag` | string | a | Tag name of each quick list item (e.g., `a` or `li`) | | `visibleClass` | string | visible | Class applied to visible rows | +| `dataFilterValue` | string | _null_ | Filter elements by a `data-[...]` attribute value instead of text content (only if the attribute exists) | +| `dataNoFilter` | string | _null_ | Do not filter elements with this `data-[...]` attribute (no attribute value is required) | ## Styling diff --git a/examples/filtertable-sample-data-attributes.html b/examples/filtertable-sample-data-attributes.html new file mode 100644 index 0000000..03a0692 --- /dev/null +++ b/examples/filtertable-sample-data-attributes.html @@ -0,0 +1,91 @@ + + + + + + jQuery.FilterTable Data Attributes Sample + + + +

jQuery.FilterTable by Data Attributes Sample

+

This is a sample of the jQuery.FilterTable plugin

+

A data-filter-value attribute is defined for each row on the last name (without first name) and a data-no-filter is defined on the "Terms" cells so they will not be filterable.

+

Presidents of the United States of America

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#PresidentTermsTenure
1George Washingtontwo1789-1797
2John Adamsone1797-1801
3Thomas Jeffersontwo1801-1809
4James Madisontwo1809-1817
5James Monroetwo1817-1825
6John Quincy Adamsone1825-1829
7Andrew Jacksontwo1829-1837
8Martin Van Burenone1837-1841
9William Henry Harrisonone-partial1841
10John Tylerone-partial1841-1845
11James Knox Polkone1845-1849
12Zachary Taylorone-partial1849-1850
13Millard Fillmoreone-partial1850-1853
14Franklin Pierceone1853-1857
15James Buchananone1857-1861
16Abraham Lincolntwo-partial1861-1865
17Andrew Johnsonone-partial1865-1869
18Ulysses S. Granttwo1869-1877
19Rutherford Birchard Hayesone1877-1881
20James Abram Garfieldone-partial1881
21Chester Alan Arthurone-partial1881-1885
22Grover Clevelandone1885-1889
23Benjamin Harrisonone1889-1893
24Grover Clevelandone-again1893-1897
25William McKinleytwo-partial1897-1901
26Theodore Roosevelttwo-partial1901-1909
27William Howard Taftone1909-1913
28Woodrow Wilsontwo1913-1921
29Warren Gamaliel Hardingtwo-partial1921-1923
30Calvin Coolidgetwo-partial1923-1929
31Herbert Clark Hooverone1929-1933
32Franklin Delano Rooseveltfour-partial1933-1945
33Harry S. Trumantwo-partial1945-1953
34Dwight David Eisenhowertwo1953-1961
35John Fitzgerald Kennedytwo-partial1961-1963
36Lyndon Baines Johnsontwo-partial1963-1969
37Richard Milhous Nixontwo-partial1969-1974
38Gerald Rudolph Fordtwo-partial1974-1977
39James Earl Carter, Jr.one1977-1981
40Ronald Wilson Reagantwo1981-1989
41George Herbert Walker Bushone1989-1993
42William Jefferson Clintontwo1993-2001
43George Walker Bushtwo2001-2009
44Barack Hussein Obamaone2009-
+

Data as of October, 2012.

+ + + + + \ No newline at end of file diff --git a/jquery.filtertable.js b/jquery.filtertable.js index 8c43476..25a7a91 100644 --- a/jquery.filtertable.js +++ b/jquery.filtertable.js @@ -6,19 +6,37 @@ * * Utilizes bindWithDelay() if available. https://github.com/bgrins/bindWithDelay * - * @version v1.5.2 + * @version v1.5.2 (modified) * @author Sunny Walker, swalker@hawaii.edu */ (function($) { var jversion = $.fn.jquery.split('.'), jmajor = parseFloat(jversion[0]), jminor = parseFloat(jversion[1]); if (jmajor<2 && jminor<8) { // build the pseudo selector for jQuery < 1.8 $.expr[':'].filterTableFind = function(a, i, m) { // build the case insensitive filtering functionality as a pseudo-selector expression - return $(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; + var _match = false, + _tbl = $(a).find('table'), + _tbl_filterby = _tbl.data('filterby'), + _tbl_nofilter = _tbl.data('nofilter'); + if (_tbl_filterby && $(a).data(_tbl_filterby)!==undefined) { + _match = String($(a).data(_tbl_filterby)).toUpperCase().indexOf(m[3].toUpperCase())>=0; + } else if (_tbl_nofilter===undefined || $(a).data(_tbl_nofilter)===undefined) { + _match = $(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0; + } + return _match; }; } else { // build the pseudo selector for jQuery >= 1.8 $.expr[':'].filterTableFind = jQuery.expr.createPseudo(function(arg) { return function(el) { - return $(el).text().toUpperCase().indexOf(arg.toUpperCase())>=0; + var _match = false, + _tbl = $(el).closest('table'), + _tbl_filterby = _tbl.data('filterby'), + _tbl_nofilter = _tbl.data('nofilter'); + if (_tbl_filterby!==undefined && $(el).data(_tbl_filterby)!==undefined) { + _match = String($(el).data(_tbl_filterby)).toUpperCase().indexOf(arg.toUpperCase())>=0; + } else if (_tbl_nofilter===undefined || $(el).data(_tbl_nofilter)===undefined) { + _match = $(el).text().toUpperCase().indexOf(arg.toUpperCase())>=0; + } + return _match; }; }); } @@ -40,7 +58,9 @@ quickListClass: 'quick', // class of each quick list item quickListGroupTag: '', // tag surrounding quick list items (e.g., ul) quickListTag: 'a', // tag type of each quick list item (e.g., a or li) - visibleClass: 'visible' // class applied to visible rows + visibleClass: 'visible', // class applied to visible rows + dataFilterValue: null, // filter elements by a "data-..." value instead of text content + dataNoFilter: null // do not filter elements with this "data-..." if so }, hsc = function(text) { // mimic PHP's htmlspecialchars() function return text.replace(/&/g, '&').replace(/"/g, '"').replace(//g, '>'); @@ -75,6 +95,12 @@ filter = null, // placeholder for the field field DOM node created_filter = true; // was the filter created or chosen from an existing element? if (t[0].nodeName==='TABLE' && tbody.length>0 && (settings.minRows===0 || (settings.minRows>0 && tbody.find('tr').length>settings.minRows)) && !t.prev().hasClass(settings.containerClass)) { // only if object is a table and there's a tbody and at least minRows trs and hasn't already had a filter added + if (settings.dataFilterValue!==null) { // if we may filter with a "data-..." value instead of text content + t.data('filterby', settings.dataFilterValue); // add the info to the global table element + } + if (settings.dataNoFilter!==null) { // if we may not filter with a "data-..." value + t.data('nofilter', settings.dataNoFilter); // add the info to the global table element + } if (settings.filterSelector && $(settings.filterSelector).length===1) { // use a single existing field as the filter input field filter = $(settings.filterSelector); container = filter.parent(); // container to hold the quick list options diff --git a/jquery.filtertable.min.js b/jquery.filtertable.min.js index 459ec3d..92edc29 100644 --- a/jquery.filtertable.min.js +++ b/jquery.filtertable.min.js @@ -6,7 +6,7 @@ * * Utilizes bindWithDelay() if available. https://github.com/bgrins/bindWithDelay * - * @version v1.5.2 + * @version v1.5.2 (modified) * @author Sunny Walker, swalker@hawaii.edu */ -!function(e){var t=e.fn.jquery.split("."),i=parseFloat(t[0]),a=parseFloat(t[1]);e.expr[":"].filterTableFind=2>i&&8>a?function(t,i,a){return e(t).text().toUpperCase().indexOf(a[3].toUpperCase())>=0}:jQuery.expr.createPseudo(function(t){return function(i){return e(i).text().toUpperCase().indexOf(t.toUpperCase())>=0}}),e.fn.filterTable=function(t){var i={autofocus:!1,callback:null,containerClass:"filter-table",containerTag:"p",hideTFootOnFilter:!1,highlightClass:"alt",inputSelector:null,inputName:"",inputType:"search",label:"Filter:",minRows:8,placeholder:"search this table",quickList:[],quickListClass:"quick",quickListGroupTag:"",quickListTag:"a",visibleClass:"visible"},a=function(e){return e.replace(/&/g,"&").replace(/"/g,""").replace(//g,">")},l=e.extend({},i,t),n=function(e,t){var i=e.find("tbody");""===t?(i.find("tr").show().addClass(l.visibleClass),i.find("td").removeClass(l.highlightClass),l.hideTFootOnFilter&&e.find("tfoot").show()):(i.find("tr").hide().removeClass(l.visibleClass),l.hideTFootOnFilter&&e.find("tfoot").hide(),i.find("td").removeClass(l.highlightClass).filter(':filterTableFind("'+t.replace(/(['"])/g,"\\$1")+'")').addClass(l.highlightClass).closest("tr").show().addClass(l.visibleClass)),l.callback&&l.callback(t,e)};return this.each(function(){var t=e(this),i=t.find("tbody"),s=null,r=null,o=null,c=!0;"TABLE"===t[0].nodeName&&i.length>0&&(0===l.minRows||l.minRows>0&&i.find("tr").length>l.minRows)&&!t.prev().hasClass(l.containerClass)&&(l.filterSelector&&1===e(l.filterSelector).length?(o=e(l.filterSelector),s=o.parent(),c=!1):(s=e("<"+l.containerTag+" />"),""!==l.containerClass&&s.addClass(l.containerClass),s.prepend(l.label+" "),o=e('')),l.autofocus&&o.attr("autofocus",!0),e.fn.bindWithDelay?o.bindWithDelay("keyup",function(){n(t,e(this).val())},200):o.bind("keyup",function(){n(t,e(this).val())}),o.bind("click search",function(){n(t,e(this).val())}),c&&s.append(o),l.quickList.length>0&&(r=l.quickListGroupTag?e("<"+l.quickListGroupTag+" />"):s,e.each(l.quickList,function(t,i){var n=e("<"+l.quickListTag+' class="'+l.quickListClass+'" />');n.text(a(i)),"A"===n[0].nodeName&&n.attr("href","#"),n.bind("click",function(e){e.preventDefault(),o.val(i).focus().trigger("click")}),r.append(n)}),r!==s&&s.append(r)),c&&t.before(s))})}}(jQuery); \ No newline at end of file +(function(e){var t=e.fn.jquery.split("."),n=parseFloat(t[0]),r=parseFloat(t[1]);if(n<2&&r<8){e.expr[":"].filterTableFind=function(t,n,r){var i=false,s=e(t).find("table"),o=s.data("filterby"),u=s.data("nofilter");if(o&&e(t).data(o)!==undefined){i=String(e(t).data(o)).toUpperCase().indexOf(r[3].toUpperCase())>=0}else if(u===undefined||e(t).data(u)===undefined){i=e(t).text().toUpperCase().indexOf(r[3].toUpperCase())>=0}return i}}else{e.expr[":"].filterTableFind=jQuery.expr.createPseudo(function(t){return function(n){var r=false,i=e(n).closest("table"),s=i.data("filterby"),o=i.data("nofilter");if(s!==undefined&&e(n).data(s)!==undefined){r=String(e(n).data(s)).toUpperCase().indexOf(t.toUpperCase())>=0}else if(o===undefined||e(n).data(o)===undefined){r=e(n).text().toUpperCase().indexOf(t.toUpperCase())>=0}return r}})}e.fn.filterTable=function(t){var n={autofocus:false,callback:null,containerClass:"filter-table",containerTag:"p",hideTFootOnFilter:false,highlightClass:"alt",inputSelector:null,inputName:"",inputType:"search",label:"Filter:",minRows:8,placeholder:"search this table",quickList:[],quickListClass:"quick",quickListGroupTag:"",quickListTag:"a",visibleClass:"visible",dataFilterValue:null,dataNoFilter:null},r=function(e){return e.replace(/&/g,"&").replace(/"/g,""").replace(//g,">")},i=e.extend({},n,t);var s=function(e,t){var n=e.find("tbody");if(t===""){n.find("tr").show().addClass(i.visibleClass);n.find("td").removeClass(i.highlightClass);if(i.hideTFootOnFilter){e.find("tfoot").show()}}else{n.find("tr").hide().removeClass(i.visibleClass);if(i.hideTFootOnFilter){e.find("tfoot").hide()}n.find("td").removeClass(i.highlightClass).filter(':filterTableFind("'+t.replace(/(['"])/g,"\\$1")+'")').addClass(i.highlightClass).closest("tr").show().addClass(i.visibleClass)}if(i.callback){i.callback(t,e)}};return this.each(function(){var t=e(this),n=t.find("tbody"),o=null,u=null,a=null,f=true;if(t[0].nodeName==="TABLE"&&n.length>0&&(i.minRows===0||i.minRows>0&&n.find("tr").length>i.minRows)&&!t.prev().hasClass(i.containerClass)){if(i.dataFilterValue!==null){t.data("filterby",i.dataFilterValue)}if(i.dataNoFilter!==null){t.data("nofilter",i.dataNoFilter)}if(i.filterSelector&&e(i.filterSelector).length===1){a=e(i.filterSelector);o=a.parent();f=false}else{o=e("<"+i.containerTag+" />");if(i.containerClass!==""){o.addClass(i.containerClass)}o.prepend(i.label+" ");a=e('')}if(i.autofocus){a.attr("autofocus",true)}if(e.fn.bindWithDelay){a.bindWithDelay("keyup",function(){s(t,e(this).val())},200)}else{a.bind("keyup",function(){s(t,e(this).val())})}a.bind("click search",function(){s(t,e(this).val())});if(f){o.append(a)}if(i.quickList.length>0){u=i.quickListGroupTag?e("<"+i.quickListGroupTag+" />"):o;e.each(i.quickList,function(t,n){var s=e("<"+i.quickListTag+' class="'+i.quickListClass+'" />');s.text(r(n));if(s[0].nodeName==="A"){s.attr("href","#")}s.bind("click",function(e){e.preventDefault();a.val(n).focus().trigger("click")});u.append(s)});if(u!==o){o.append(u)}}if(f){t.before(o)}}})}})(jQuery); \ No newline at end of file