Filter table by class or data on jquery
0
- Error when I select first "Icon" shows "Not found", then I choose "Talisman" and does not shows. Should show "Not Found".
- 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>javascript jquery
asked Nov 23 '18 at 18:19
OleksiyOleksiy
32
add a comment |
0
- Error when I select first "Icon" shows "Not found", then I choose "Talisman" and does not shows. Should show "Not Found".
- 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>javascript jquery
asked Nov 23 '18 at 18:19
OleksiyOleksiy
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
add a comment |
0
0
0
- Error when I select first "Icon" shows "Not found", then I choose "Talisman" and does not shows. Should show "Not Found".
- 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>javascript jquery
asked Nov 23 '18 at 18:19
OleksiyOleksiy
32
- Error when I select first "Icon" shows "Not found", then I choose "Talisman" and does not shows. Should show "Not Found".
- 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
javascript jquery
asked Nov 23 '18 at 18:19
OleksiyOleksiy
32
asked Nov 23 '18 at 18:19
OleksiyOleksiy
32
asked Nov 23 '18 at 18:19
OleksiyOleksiy
32
asked Nov 23 '18 at 18:19
OleksiyOleksiy
32
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
add a comment |
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
add a comment |
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>answered Nov 24 '18 at 0:30
mcvmcv
80711332
add a comment |
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>answered Nov 23 '18 at 19:47
charlietflcharlietfl
139k1389121
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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>answered Nov 24 '18 at 0:30
mcvmcv
80711332
add a comment |
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>answered Nov 24 '18 at 0:30
mcvmcv
80711332
add a comment |
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>answered Nov 24 '18 at 0:30
mcvmcv
80711332
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>answered Nov 24 '18 at 0:30
mcvmcv
80711332
edited Nov 24 '18 at 0:44
answered Nov 24 '18 at 0:30
mcvmcv
80711332
answered Nov 24 '18 at 0:30
mcvmcv
80711332
answered Nov 24 '18 at 0:30
mcvmcv
80711332
80711332
add a comment |
add a comment |
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>answered Nov 23 '18 at 19:47
charlietflcharlietfl
139k1389121
add a comment |
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>answered Nov 23 '18 at 19:47
charlietflcharlietfl
139k1389121
add a comment |
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>answered Nov 23 '18 at 19:47
charlietflcharlietfl
139k1389121
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>answered Nov 23 '18 at 19:47
charlietflcharlietfl
139k1389121
edited Nov 23 '18 at 20:00
answered Nov 23 '18 at 19:47
charlietflcharlietfl
139k1389121
answered Nov 23 '18 at 19:47
charlietflcharlietfl
139k1389121
answered Nov 23 '18 at 19:47
charlietflcharlietfl
139k1389121
139k1389121
add a comment |
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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