Tengo una tabla que tiene tres columnas y encima tengo dos filtros, la idea es que si se llena un filtro se muestren los resultados y si se llena el segundo se consulte de acuerdo a lo obtenido con el primer filtro, pero no he logrado hacer que funcione de esa forma, si alguno tiene una solución se lo agradezco.
$(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>