I have a table that has three columns and on top of that I have two filters, the idea is that if one filter is filled the results are displayed and if the second is filled it is queried according to what is obtained with the first filter, but I have not been able to make works that way, if anyone has a solution I appreciate it.
$(document).ready(function(){
$("#search").keyup(filtrar);
$("#select").change(filtrar);
})
const filtrar = () => {
console.log("true");
const select = $('#select').val();
const search = $('#search').val();
let filtrar = false;
const listFilter = [];
if(select !== undefined && select.length > 0){
const res = buscador("#select", 2, true);
listFilter.push(...res);
filtrar = true;
}
if(search !== undefined && search !== ("")){
res = buscador("#search", 0);
listFilter.push(...res);
filtrar = true;
}
if(filtrar){
$.each($("#registros tbody tr"), function() { $(this).hide() });
listFilter.forEach(function(item) { $(item).show() });
}else{
$.each($("#registros tbody tr"), function() { $(this).show() });
return;
}
}
const buscador = (selector, posicion, multiple=false, text=false) => {
_this = $(selector)[0];
list = [];
if(multiple){
for(let i = 0; i < $(_this).val().length; i++){
const valor = $(_this)[0].selectedOptions[i];
console.log($(valor).text());
$.each($("#registros tbody tr"), function() {
const element = $(this)[0].children[posicion];
if($(element).text().toLowerCase().indexOf($(valor).text().toLowerCase()) !== -1){
list.push(this);
}
});
}
}else{
$.each($("#registros tbody tr"), function() {
const element = $(this)[0].children[posicion];
const valor = text ? $(_this).text() : $(_this).val();
if($(element).text().toLowerCase().indexOf(valor.toLowerCase()) !== -1){
list.push(this);
}
});
}
return list;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
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;
}
</style>
</head>
<script>
</script>
<body>
<h2>HTML Table</h2>
<input id="search"/>
<select id="select" multiple>
<option value="1">Germany</option>
<option value="2">Mexico</option>
<option value="3">Austria</option>
<option value="4">UK</option>
<option value="5">Canada</option>
<option value="6">Italy</option>
</select>
<table id="registros">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>