Menu
I am filtering a table with checkboxes. The code I have works fine, in some aspects.
I want it to filter results if they meet all the checks, not one.
based on: How can I add to my table filter to allow for multiple checkbox selections, as well as filtering from a dropdown?
My Example
$("input[name='filterStatus'], select.filter").change(function() {
var classes = [];
var stateClass = ""
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.' + $(this).val());
}
});
if (classes == "" && stateClass == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*');
if (rows.size() > 0) {
rows.show();
}
}
});<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="ISO " />
<label for="filter_1">ISO</label>
<input type="checkbox" name="filterStatus" value="AMCA" />
<label for="filter_2">AMCA</label>
<input type="checkbox" name="filterStatus" value="UL" />
<label for="filter_3">UL</label>
</form>
<table border="1" id="StatusTable">
<thead>
<tr>
<th>Name</th>
<th>ISO</th>
<th>AMCA</th>
<th>UL</th>
</tr>
<tbody>
<tr class="ISO">
<td class="Name">Name1</td>
<td class="ISO">✓</td>
<td class="AMCA"> </td>
<td class="UL"> </td>
</tr>
<tr class="ISO AMCA">
<td class="Name">Name2</td>
<td class="ISO">✓</td>
<td class="AMCA">✓</td>
<td class="UL"> </td>
</tr>
<tr class="ISO AMCA UL">
<td class="Name">Name3</td>
<td class="ISO">✓</td>
<td class="AMCA">✓</td>
<td class="UL">✓</td>
</tr>
</tbody>
</table>
<script></script>
</body>
</html>
852
Modify your jQuery where it loops through each row. Create a tag variable to store whether or not the row is to be shown, and set it to true by default.
Now when you loop through each row, you will also loop through each class you are checking for. If at any point, a loop test fails, set your show variable to false to keep the row hidden.
$("input[name='filterStatus']").change(function () {
var classes = [];
$("input[name='filterStatus']").each(function () {
if ($(this).is(":checked")) { classes.push('.' + $(this).val()); }
});
if (classes == "") { // if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else { // otherwise, hide everything...
$("#StatusTable tbody tr").hide();
$("#StatusTable tr").each(function () {
var show = true;
var row = $(this);
classes.forEach(function (className) {
if (row.find('td' + className).html() == ' ') { show = false; }
});
if (show) { row.show(); }
});
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="ISO " />
<label for="filter_1">ISO</label>
<input type="checkbox" name="filterStatus" value="AMCA" />
<label for="filter_2">AMCA</label>
<input type="checkbox" name="filterStatus" value="UL" />
<label for="filter_3">UL</label>
</form>
<table border="1" id="StatusTable">
<thead>
<tr>
<th>Name</th>
<th>ISO</th>
<th>AMCA</th>
<th>UL</th>
</tr>
<tbody>
<tr class="ISO">
<td class="Name">Name1</td>
<td class="ISO">✓</td>
<td class="AMCA"> </td>
<td class="UL"> </td>
</tr>
<tr class="ISO AMCA">
<td class="Name">Name2</td>
<td class="ISO">✓</td>
<td class="AMCA">✓</td>
<td class="UL"> </td>
</tr>
<tr class="ISO AMCA UL">
<td class="Name">Name3</td>
<td class="ISO">✓</td>
<td class="AMCA">✓</td>
<td class="UL">✓</td>
</tr>
</tbody>
</table>
<script></script>
</body>
</html>Here with the help of this below code. You can filter the table based on checkbox checked and when you didn't select any checkbox then it will display all the records.
$(document).ready(function(){
$(".name").on("click", function() {
name_list = []
$("#myTable tr").hide()
var flag = 1
$("input:checkbox[name=name]:checked").each(function(){
flag = 0;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
if($(this).text().toLowerCase().indexOf(value) > -1)
$(this).show()
});
});
if(flag == 1)
$("#myTable tr").show()
});
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
<style>
</style>
</head>
<body>
<h2>Filterable Table</h2>
<input type="checkbox" class="name" name="name" value="John" />John
<input type="checkbox" class="name" name="name" value="July" />July
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</body>
</html>Demo: https://jsfiddle.net/erkaner/u12te5jb/
Here is my solution
$("input[name='filterStatus']").change(function () {
var count1 = $("input[name='filterStatus']:checked").length;//number of checked items
$("#StatusTable>tbody> tr").each(function () {//for each row
var count2 = 0;//this is the count of td that has ✓
var row = $(this);//the current row
$("input[name='filterStatus']:checked").each(function () {//for each checked item
var inputVal = $(this).val();//get the value, which is class of the corresponding td, see below
if (row.find('.' + inputVal).html().indexOf("✓") >= 0)//if the td that corresponds to the selected checkbox contains ✓
count2++;//then increase
});
if (count1 == count2) //if counts match
row.show();//then show
else
row.hide();
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
