Como filtrar una tabla sin tener que recargar la página

Mucha veces nos pasa, que tenemos una tabla muy grande en HTML y nos piden que se pueda filtrar de alguna forma sin tener que recargar la página cada vez que quieran filtrar, conozco a muchas personas que para eso utilizan varias librerias y componentes externos, que se tienen que descargar, probar y modificar parte del código HTML para adaptar a dichas librerias

Hoy os traigo un forma muy sencilla de hacer un filtrado en la tabla sin tener que recargar, os explico como y luego os pongo el código.

Explicación

Para realizar esto, vamos a necesitar (aparte de una tabla en HTML) un campo de texto (input text), el cual usaremos para que el usuario vaya tecleando y nada más se suelte la letra (se puede cambiar por un button o similar), se vaya filtrando la tabla.

El procedimiento que seguiremos es que cada vez que el usuario deje de presionar la tecla en el campo del texto, mediante Javascript vamos a recorrer el tbody de la tabla (ya que no queremos que desaparezca ni la cabecera ni el footer (thead y tfoot)) y aplicaremos un estilo css para indicar si queremos que se visualize esta fila o no. Por defecto pondremos que no se visualice y si en caso el texto de la celda tiene parte de lo escrito por el usuario, entonces lo visualizaremos.

Código

Para empezar necesitamos un campo de texto donde el usuario buscará lo que necesita de la tabla.
Es importante que para este input, tenga un identificador único (id) y en el evento onkeyup una función que será la que crearemos en Javascript.

Si en vez de usar solamente el textbox, quereis usar un button, usar el evento onclick en el button y no pongais ningun evento en el textbox

<input type="text" id="txtSearch" placeholder="Buscar..." onkeyup="searchTable()">

Luego necesitamos la tabla, que únicamente necesitaremos tener un identificador únido (id).

<table id="tabla">
    <thead>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Apellidos</th>
      </tr>      
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>Wick</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Bruce</td>
        <td>Lee</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Brandon</td>
        <td>Lee</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Chuck</td>
        <td>Norris</td>
      </tr>
      <tr>
        <td>5</td>
        <td>John</td>
        <td>Doe</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>ID</th>
        <th>Nombre</th>
        <th>Apellidos</th>
      </tr>      
    </tfoot>
  </table>

Y para finalizar nos hará falta la función de Javascript que recorrerá fila a fila (tr) el tbody de la tabla y de cada fila, recorrerá sus columnas (td) y buscará en dichas celdas si existe el texto introducido por el usuario ya sea completamente el texto o solamente parte parcial del texto.

function searchTable() {
      var txtSearch, tabla, tr, visible, td, texto;
      
      //Objetos que vamos a usar (textbox y la tabla)
      txtSearch = document.getElementById("txtSearch");
      tabla = document.getElementById("tabla");
      
      // Guardamos en la variable tr todas las filas que estan dentro del <tbody>
      tr = tabla.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

      // Recorremos fila a fila
      for (i=0; i<tr.length; i++) {
        visible = false; // Por defecto decimos que no sea visible, ya que solo queremos mostrar SI existe parte del texto
        td = tr[i].getElementsByTagName("td"); // Guardamos todas las columnas de dicha fila
        for (j=0; j<td.length; j++) { // Recorremos todas las columnas de la fila
          texto = td[j].innerText; //Guardamos el valor que tiene la celda (td) en la variable texto. OjO en algunos navegadores he tenido que usar textContent en vez de innerText (podeis usar un || con las dos propiedades) 
          if (texto.toUpperCase().indexOf(txtSearch.value.toUpperCase()) > -1) { 
            // si el contenido de la celda (en mayusculas) contiene parte el texto del usuario (en mayuscula) ponemos el visible a true
            visible = true;
          }
        }
        tr[i].style.display = visible ? "" : "none"; //si visible = true entonces lo dejamos visible, en caso de ser false, modificamos su css para hacer  que display:none
      }      
    }

Y con esto ya tenemos nuestra tabla filtrandonse sin tener que recargar ni usar herramientas de terceros.

En nuestro Github teneis el código completo

Espero que os sirva