Intenté usar el siguiente código js para filtrar las filas de la tabla. El código es originalmente de w3schools, pero hice algunas modificaciones para apuntar a todos mis valores de entrada. El filtrado funciona muy bien para una columna, pero en cuanto intento ingresar un valor en una segunda columna, sobrescribe el filtro anterior.
Por ejemplo, si filtro "Prueba" en la columna 1, funciona muy bien y oculta la segunda fila. Si después de eso también filtro la columna 2 para la identificación "2", ocultará la primera fila y, en su lugar, mostrará la segunda fila para la identificación 2. ¿Es posible modificar el código para que solo filtre las filas que quedan y se muestran? no todas las filas todas juntas. He intentado varias horas tratando de apuntar solo a tr[i].style.display != "none"; pero sin éxito. Mi objetivo es algo como esto: DataTables . He visto y leído toneladas de otros hilos aquí con respecto a este problema, pero nada parece funcionar. Agradezco toda la ayuda y orientación.
| Nombre | IDENTIFICACIÓN |
|---|---|
| Prueba | 1 |
| otra prueba | 2 |
| [Campo de entrada para filtro] | [Campo de entrada para filtro] |
$(document).ready(function() { document.querySelectorAll('.search').forEach(item => { item.addEventListener('keyup', event => { var input, filter, table, tr, td, i, txtValue; input = event.target; filter = input.value.toUpperCase(); table = document.getElementById("example"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[event.target.getAttribute('data-value')]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } }) }) } );Su código era una combinación de vanillaJS y jQuery, y estaba etiquetado para ambos, así que elegí jquery porque es un poco más conciso y fácil de leer.
Básicamente, debe verificar ambas celdas en cada fila con ambos filtros de búsqueda cada vez que se presiona la tecla. Para hacerlo, hice las cosas un poco más fáciles dando a las filas TR de datos una clase para que no estemos buscando el encabezado o las celdas con los cuadros de búsqueda. Luego, solo comparo el filtro 1 con la celda 1 y el filtro 2 con la celda 2 para cada fila. Si hay una coincidencia para cualquiera, esa fila permanece visible; de lo contrario, está oculta. Tuve que agregar algo de lógica en caso de que no hubiera un valor en ninguna de las entradas del filtro.
Un par de otras notas:
$('.search').eq(0) es lo mismo que the FIRST element with the class search$(el).find('td').eq(0).text().trim().toLowerCase() es lo mismo que find the FIRST TD tag's text, trim off the extra whitespace and convert to lowercase $(document).ready(function() { $('.search').keyup(function() { let search1 = $('.search').eq(0).val().toLowerCase(); let search2 = $('.search').eq(1).val().toLowerCase(); $('.s-table tr.data').each(function(i, el) { let val1 = $(el).find('td').eq(0).text().trim().toLowerCase() let val2 = $(el).find('td').eq(1).text().trim().toLowerCase() let ok = (search1 && val1.indexOf(search1) !== -1) || (search2 && val2.indexOf(search2) !== -1) if (ok) $(el).closest('tr').show(); else $(el).closest('tr').hide(); }) return }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="s-table"> <thead> <tr> <th>Name</th> <th>ID</th> </tr> </thead> <tbody> <tr class='data'> <td>Test</td> <td>1</td> </tr> <tr class='data'> <td>Another test</td> <td>2</td> </tr> <tr> <td><input data-col='0' class='search' placeholder='filter'></td> <td><input data-col='1' class='search' placeholder='filter'></td> </tr> </tbody> </table>