¿Cómo filtrar datos de una tabla con Javascript fácilmente?

Hooolaaaa!! 🙂 hace poco, estaba programando un pequeño sistemita en PHP, y a la hora de mostrar los resultados, necesitaba por lo menos filtrarlos por fecha, y no encontraba la manera, me puse a inventar unas cositas por allí hasta que di con la solución y se las comparto en este post:

  1. Descargamos el plugin de JQuery llamado JQuery.uitablefilter, el cual se encuentra aquí listo para descargar.
  2. Luego creamos una tabla y le asignamos un id; en este caso yo le coloque “latabla”
<table width="900" height="30" border="0" align="center" id="latabla">
<tr>
<td>Soy la tabla donde pongo los resultados</td>
</tr>
</table>
  1. Seguidamente, importamos el archivo que descargamos (JQuery.uitablefilter) y lo incluimos en el archivo en el que estamos trabajando.

 

<script type="text/javascript" src="../js/jquery.uitablefilter.js"></script>
 
  1. Debajo de la inclusión, colocaremos una función que lo que simplemente hace es filtrar de acuerdo a campo que queremos, en este caso yo lo hice para un campo de fecha, es decir un datepicker, para este el comportamiento es que cuando se seleccione determinada fecha el cree una nueva tabla según este filtro. Ahora si queremos filtrar por un campo de tipo texto el evento en vez de ser “keyup change” seria “onkey change”.
<script language="javascript">
        $(function() {
          theTable = $("#latabla");
          $("#datepicker").on("keyup change", function () {
            $.uiTableFilter(theTable, this.value);
          });
        });
        </script>
 

 

Espero que sea de utilidad este post, yo tardé mucho tiempo en verlo y lograr que el funcionamiento fuera el esperado y por eso lo comparto por aquí con la finalidad de ayudarlos! Saludos 🙂

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s