0

He buscado en muchas páginas información de cómo hacer una búsqueda con varios filtros en un tabla html.

Que al momento de buscar se digite en el primer filtro el dato, y al momento de ingresar el siguiente dato en el otro filtro, no me borre el dato del filtro anterior. Necesito poner varios filtros pero que ninguno altere la búsqueda del otro.

Código HMTL:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Busqueda Central" title="Busqueda Rapida" class="form-control">

<table id=myTable>

        <th>CODIGO</th>
        <th>CIUDAD</th>
        <th>CENTRAL</th>
        <th>EQUIPO</th>
        <th>TIPO DE EQUIPO</th>
        <th>MARCA</th>
        <th>MODELO</th>
        <th>UNIDAD</th>
        <th>CANTIDAD</th>

<tr>

    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>
    ..<td id="hola" valign="top" width="150" align="center"></td>

</tr>

</table>

Código del buscador que estoy usando:

<script>
 function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
  td = tr[i].getElementsByTagName("td")[3];
   if (td) {
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
       tr[i].style.display = "none";
     }
    }       
  }
}

</script>
2
  • Has intentado utilizar alguna librería para manejar con algún patrón MVVM? podría darte un ejemplo y tu vida seria mas fácil! como por ejemplo Knockout.js => knockoutjs.com Commented el 21 mar. 2018 a las 15:45
  • ¿La etiqueta de jQuery es porque te valen respuestas que sean jQuery? En tu código no parece que lo estés utilizando.
    – Alvaro Montoro
    Commented el 29 mar. 2018 a las 17:26

1 respuesta 1

2

Intenta con este plugin: https://datatables.net/examples/data_sources/dom.html

Un ejemplo como el que tienes seria así:

$(document).ready(function() {
    $('#example').DataTable();
} );
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>           
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

1
  • Gracias me sirvio mucho. Commented el 31 jul. 2019 a las 14:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.