Filter table by class or data on jquery

Question

1. Error when I select first "Icon" shows "Not found", then I choose "Talisman" and does not shows. Should show "Not Found".
2. Is it possible to do so?

Add to class = f-Icon f-Ring f-Neck. Then look for the value by class.

Choose "Icon Ring Neck OR Ring Icon Neck OR Neck Ring Icon" and show this line. Make it so that it shows only if matches are found.

 $(document).ready(function() { (function() { var filters = { itemslot1: null, itemslot2: null, itemslot3: null }; function updateFilters() { $(".table-data") .hide() .filter(function() { var self = $(this), result = true; Object.keys(filters).forEach(function(filter) { if ( filters[filter] && filters[filter] != "All" ) { result = result && filters[filter] === self.data(filter); } }); return result; }) .show(); } function bindDropdownFilters() { Object.keys(filters).forEach(function(filterName) { $("#" + filterName + "-filter").on("change", function() { filters[filterName] = this.value; updateFilters(); var $table = $('#filter-table'), $colLength = $table.find('thead th').length, $filteredCount = $table.find('tbody tr:visible').length; console.log($filteredCount); if ($filteredCount == 0) { $table.find('tbody').append($("<tr />").addClass("no-result").css({ "text-align": "center" }).append($("<td />").attr("colspan", $colLength).html("Not found."))); } else { $(".no-result").remove(); } }); }); } bindDropdownFilters(); })(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='table-filters'> <select id="itemslot1-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot2-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot3-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> </div> <table id="filter-table"> <thead> <tr> <th>Slot 1</th> <th>Slot 2</th> <th>Slot 3</th> </tr> </thead> <tbody> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist"> <td>Ring</td> <td>Neck</td> <td>Waist</td> </tr> <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring"> <td>Neck</td> <td>Waist</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring"> <td>Sword Knot</td> <td>Neck</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring"> <td>Ring</td> <td>Ring</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman"> <td>Ring</td> <td>Ring</td> <td>Talisman</td> </tr> </tbody> </table> 

Answer 1

I streamlined your filtering by first filtering keys that have valid values. If there are none, show all rows.

Then use Array#every() to match all the columns that have valid filters.

Where you had a problem is your result would only depend on the last key in the Object.keys()

No changes were made in bindDropdownFilters() or in the html

 $(document).ready(function() { (function() { var filters = { itemslot1: null, itemslot2: null, itemslot3: null }; function updateFilters() { // filter for keys that are valid var filterKeys = Object.keys(filters).filter(function(filter) { return filters[filter] && filters[filter] != "All" }) if (!filterKeys.length) { // no filters...show all $(".table-data").show() } else { $(".table-data") .hide() .filter(function() { var self = $(this); // make sure all valid filters have a match return filterKeys.every(function(filter) { return filters[filter] === self.data(filter); }); }).show(); } } function bindDropdownFilters() { Object.keys(filters).forEach(function(filterName) { $("#" + filterName + "-filter").on("change", function() { filters[filterName] = this.value; updateFilters(); var $table = $('#filter-table'), $colLength = $table.find('thead th').length, $filteredCount = $table.find('tbody tr:visible').length; console.log($filteredCount); if ($filteredCount == 0) { $table.find('tbody').append($("<tr />").addClass("no-result").css({ "text-align": "center" }).append($("<td />").attr("colspan", $colLength).html("Not found."))); } else { $(".no-result").remove(); } }); }); } bindDropdownFilters(); })(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='table-filters'> <select id="itemslot1-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot2-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot3-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> </div> <table id="filter-table"> <thead> <tr> <th>Slot 1</th> <th>Slot 2</th> <th>Slot 3</th> </tr> </thead> <tbody> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist"> <td>Ring</td> <td>Neck</td> <td>Waist</td> </tr> <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring"> <td>Neck</td> <td>Waist</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring"> <td>Sword Knot</td> <td>Neck</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring"> <td>Ring</td> <td>Ring</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman"> <td>Ring</td> <td>Ring</td> <td>Talisman</td> </tr> </tbody> </table> 

Answer 2

Provided a boolean check for isZero to keep track if the Not Found should be displayed or hidden.

Also added a check to verify that your table-data is visible, than the "Not Found" will be removed.

When you select Icon, than Talisman the option Not Found now remains.

 $(document).ready(function() { (function() { var filters = { itemslot1: null, itemslot2: null, itemslot3: null }; function updateFilters() { $(".table-data") .hide() .filter(function() { var self = $(this), result = true; Object.keys(filters).forEach(function(filter) { if ( filters[filter] && filters[filter] != "All" ) { result = result && filters[filter] === self.data(filter); } }); return result; }) .show(); } function bindDropdownFilters() { var isZero = false; Object.keys(filters).forEach(function(filterName) { $("#" + filterName + "-filter").on("change", function() { filters[filterName] = this.value; updateFilters(); var $table = $('#filter-table'), $colLength = $table.find('thead th').length, $filteredCount = $table.find('tbody tr:visible').length; console.log($filteredCount); if ($filteredCount == 0 && !isZero) { isZero = true; $table.find('tbody').append($("<tr />").addClass("no-result").css({ "text-align": "center" }).append($("<td />").attr("colspan", $colLength).html("Not found."))); } else if ($('.table-data').css('display') != 'none') { $(".no-result").remove(); isZero = false; } }); }); } bindDropdownFilters(); })(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='table-filters'> <select id="itemslot1-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot2-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> <select id="itemslot3-filter"> <option>All</option> <option value="Icon">Icon</option> <option value="Ring">Ring</option> <option value="Waist">Waist</option> <option value="Talisman">Talisman</option> <option value="Sword Knot">Sword Knot</option> <option value="Neck">Neck</option> </select> </div> <table id="filter-table"> <thead> <tr> <th>Slot 1</th> <th>Slot 2</th> <th>Slot 3</th> </tr> </thead> <tbody> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Neck" data-itemslot3="Waist"> <td>Ring</td> <td>Neck</td> <td>Waist</td> </tr> <tr class="table-data" data-itemslot1="Neck" data-itemslot2="Waist" data-itemslot3="Ring"> <td>Neck</td> <td>Waist</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Sword Knot" data-itemslot2="Neck" data-itemslot3="Ring"> <td>Sword Knot</td> <td>Neck</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Ring"> <td>Ring</td> <td>Ring</td> <td>Ring</td> </tr> <tr class="table-data" data-itemslot1="Ring" data-itemslot2="Ring" data-itemslot3="Talisman"> <td>Ring</td> <td>Ring</td> <td>Talisman</td> </tr> </tbody> </table>