├── README.md ├── LICENSE ├── search-table.js └── vanilla-search-table.js /README.md: -------------------------------------------------------------------------------- 1 | # search-table-js 2 | 3 | **jquery dependency** 4 | 5 | Make a table as searchable with javascript. It's necessary import jquery before. 6 | 7 | How to use: 8 | 9 | ```javascript 10 | $("#yourtable").searchTable(); 11 | ``` 12 | or 13 | ```javascript 14 | $("#yourtable").searchTable({ 15 | filterTrClass: ".master", 16 | placeholder: "Type some term to find on table", 17 | before: function () { 18 | console.log("My function"); 19 | } 20 | }); 21 | ``` 22 | **without dependency** 23 | 24 | ```javascript 25 | window.searchTable("#yourtable"); 26 | ``` 27 | 28 | It looks better when used within a bootstrap CSS! :) 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Charles Oliveira 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /search-table.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 'use strict'; 3 | function setUpOptions(options) { 4 | const placeholderConst = "Enter a search term"; 5 | var defaultOptions = options || { placeholder: placeholderConst, filterTrClass: "" }; 6 | if (defaultOptions.placeholder === undefined) 7 | defaultOptions.placeholder = placeholderConst; 8 | if (defaultOptions.filterTrClass === undefined) 9 | defaultOptions.filterTrClass = ""; 10 | return defaultOptions; 11 | } 12 | var searchTable = function (table, options) { 13 | this.setUp = function () { 14 | var defaultOptions = setUpOptions(options); 15 | var inputSearch = $("", { type: "text", 'class': "span6", placeholder: defaultOptions.placeholder }); 16 | var spanSearch = $("", { 'class': "add-on" }).append($("", { 'class': "icon icon-search" })) 17 | var divSearch = $("
", { 'class': "row-fluid input-append" }); 18 | divSearch.append(inputSearch).append(spanSearch); 19 | $(table).before(divSearch); 20 | var $rows = $(table).find('tbody tr' + defaultOptions.filterTrClass); 21 | inputSearch.keyup(function () { 22 | if (typeof defaultOptions.before === 'function') 23 | defaultOptions.before(); 24 | var val = '^(?=.*' + $.trim($(this).val()).split(/\s+/).join(')(?=.*') + ').*$', 25 | reg = RegExp(val, 'i'), 26 | text; 27 | $rows.show().filter(function () { 28 | text = $(this).text().replace(/\s+/g, ' '); 29 | return !reg.test(text); 30 | }).hide(); 31 | }); 32 | } 33 | } 34 | $.fn.searchTable = function (options) { 35 | var st = new searchTable(this, options); 36 | st.setUp(); 37 | } 38 | })(jQuery); 39 | -------------------------------------------------------------------------------- /vanilla-search-table.js: -------------------------------------------------------------------------------- 1 | (function (wind) { 2 | 'use strict'; 3 | 4 | class searchTable { 5 | constructor(table, options) { 6 | function setUpOptions(options) { 7 | const placeHolderConst = "Enter a search term"; 8 | var defaultOptions = options || { placeholder: placeHolderConst, filterTrClass: "" }; 9 | if (defaultOptions.placeholder === undefined) 10 | defaultOptions.placeholder = placeHolderConst; 11 | if (defaultOptions.filterTrClass === undefined) 12 | defaultOptions.filterTrClass = ""; 13 | return defaultOptions; 14 | } 15 | 16 | this.setUp = function () { 17 | var defaultOptions = setUpOptions(options); 18 | var inputSearch = document.createElement('input'); 19 | inputSearch.setAttribute('type', 'text'); 20 | inputSearch.setAttribute('placeholder', defaultOptions.placeholder); 21 | inputSearch.classList.add('class', 'span6'); 22 | 23 | var spanSearch = document.createElement('span') 24 | spanSearch.setAttribute('class', 'add-on') 25 | const icon = document.createElement('i'); 26 | ['icon', 'icon-search'].forEach(cl => icon.classList.add('class', cl)); 27 | spanSearch.appendChild(icon); 28 | 29 | const divSearch = document.createElement('div'); 30 | ['row-fluid', 'input-append'].forEach(cl => divSearch.classList.add('class', cl)); 31 | divSearch.appendChild(inputSearch); 32 | divSearch.append(spanSearch); 33 | 34 | document.querySelector(table).closest('div').insertBefore(divSearch, document.querySelector(table)); 35 | 36 | var rows = document.querySelector(table).querySelectorAll('tbody tr' + defaultOptions.filterTrClass); 37 | 38 | inputSearch.addEventListener('keyup', function () { 39 | const val = '^(?=.*' + this.value.trim().split(/\s+/).join(')(?=.*') + ').*$'; 40 | const reg = RegExp(val, 'i'); 41 | 42 | [].forEach.call(rows, (el) => { 43 | const text = el.innerText.replace(/\s+/g, ' '); 44 | console.log('row el', text); 45 | if (reg.test(text)) 46 | el.style.display = 'table-row'; 47 | else 48 | el.style.display = 'none'; 49 | }); 50 | }); 51 | }; 52 | } 53 | } 54 | 55 | wind.searchTable = function (tableId, options) { 56 | console.log('document.searchTable', tableId); 57 | var st = new searchTable(tableId, options); 58 | st.setUp(); 59 | }; 60 | })(window); 61 | --------------------------------------------------------------------------------