Filter table by class or data on jquery












0
















  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>












share|improve this question























  • When you apply your second filter, the initial filter result is not being accounted for so your if(count==0) does not apply when you select Talisman and the <tr class="no-result"> is removed. maybe look into ways to account for all filters upon a filter change, and that will fix your problem, because if any filter result returns a 0, the row you want displayed will remain displayed.

    – mcv
    Nov 24 '18 at 0:03
















0
















  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>












share|improve this question























  • When you apply your second filter, the initial filter result is not being accounted for so your if(count==0) does not apply when you select Talisman and the <tr class="no-result"> is removed. maybe look into ways to account for all filters upon a filter change, and that will fix your problem, because if any filter result returns a 0, the row you want displayed will remain displayed.

    – mcv
    Nov 24 '18 at 0:03














0












0








0









  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>












share|improve this 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>








$(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>





$(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>






javascript jquery






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 23 '18 at 18:19









OleksiyOleksiy

32




32













  • When you apply your second filter, the initial filter result is not being accounted for so your if(count==0) does not apply when you select Talisman and the <tr class="no-result"> is removed. maybe look into ways to account for all filters upon a filter change, and that will fix your problem, because if any filter result returns a 0, the row you want displayed will remain displayed.

    – mcv
    Nov 24 '18 at 0:03



















  • When you apply your second filter, the initial filter result is not being accounted for so your if(count==0) does not apply when you select Talisman and the <tr class="no-result"> is removed. maybe look into ways to account for all filters upon a filter change, and that will fix your problem, because if any filter result returns a 0, the row you want displayed will remain displayed.

    – mcv
    Nov 24 '18 at 0:03

















When you apply your second filter, the initial filter result is not being accounted for so your if(count==0) does not apply when you select Talisman and the <tr class="no-result"> is removed. maybe look into ways to account for all filters upon a filter change, and that will fix your problem, because if any filter result returns a 0, the row you want displayed will remain displayed.

– mcv
Nov 24 '18 at 0:03





When you apply your second filter, the initial filter result is not being accounted for so your if(count==0) does not apply when you select Talisman and the <tr class="no-result"> is removed. maybe look into ways to account for all filters upon a filter change, and that will fix your problem, because if any filter result returns a 0, the row you want displayed will remain displayed.

– mcv
Nov 24 '18 at 0:03












2 Answers
2






active

oldest

votes


















0














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>








share|improve this 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>








    share|improve this answer

























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451394%2ffilter-table-by-class-or-data-on-jquery%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      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>








      share|improve this answer






























        0














        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>








        share|improve this answer




























          0












          0








          0







          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>








          share|improve this answer















          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>








          $(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>





          $(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>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 24 '18 at 0:44

























          answered Nov 24 '18 at 0:30









          mcvmcv

          80211332




          80211332

























              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>








              share|improve this 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>








                share|improve this answer




























                  1












                  1








                  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>








                  share|improve this answer















                  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>








                  $(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>





                  $(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>






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 23 '18 at 20:00

























                  answered Nov 23 '18 at 19:47









                  charlietflcharlietfl

                  139k1387120




                  139k1387120






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451394%2ffilter-table-by-class-or-data-on-jquery%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Berounka

                      Sphinx de Gizeh

                      Different font size/position of beamer's navigation symbols template's content depending on regular/plain...