Realizando filtros para tabla en HTML5 con Jquery

En esta ocasión me he topado con la tarea de realizar un filtro para una tabla en HTML5.

Un ejemplo de como luce la tabla que he realizado:

Ejemplo de tabla de Bootstrap

Al momento de utilizar el buscador que vemos más arriba, debemos ejecutar un script que realice un “escaneo” sobre nuestra tabla para poder entonces efectuar la busqueda en base a lo que el usuario va introduciendo en nuestro buscador.

Para la realización de esto veremos lo que son los DOM de HTML5, usaremos los selectores de Jquery y algunas funciones del mismo franework que nos permetirán organizar la tabla.

Te recomiendo que veas JQuery selectors  para que aprendas la utilización de los selectores de JQuery, además del evento keyup de JQuery   una vez veas la utilización tanto de los selectores como de los eventos y en especial este evento entonces, por último te recomiendo que leas tanto sobre split, filter, find, show y por último hide.

Bien, ya que conoces como utilizar estos eventos y los selectores de JQuery ya estas listo para analizar conmigo cómo cree el buscador:

$("#mySearchArea").keyup(function () {
   var rows = $("#fbody").find("tr").hide();
   if (this.value.length) {
       var data = this.value.split(" ");
       $.each(data, function (i, v) {
           rows.filter(":contains('" + v + "')").show();
       });
   } else rows.show();
});

A ver, es bien simple, lo primero es que con keyup estamos al tanto de cada momento en el que el usuario ha presionado el teclado y una vez esto pase la función es activada.
Luego de que activamos la función creamos una variable donde lo que hacemos es que declaramos que todas las filas (tr) dentro del id “fbody” se ocultarán; luego hacemos una condición y decimos, si … this (el valor obtenido que es el mismo que el usuario ha presionado en el teclado y que ha activado la función) … value (valor) … length (posee una longitud valida o mayor a cero) … Entonces: Declara la variable “data” y crea un array (split) con el valor obtenido, el patrón para crear el array (arreglo numérico) es que en cada espacio que tenga el valor del campo donde el usuario está precionando el teclado; cada espacio será un divisor que creará un nuevo índice para el array (en este caso el array sería numérico indexado).

Una vez creada la variable data entonces quiero que recorras el array $.each(data , … ) y crees una función con mientras estes recorriendo el array y dentro de la función indicaremos “i” y “v”, siendo “i” el indice de nuestro array y “v” el valor obtenido de dicho indice recorrido.

Luego dentro de este loop (ciclo) que recorre nuestro array quiero que hagas en cada una de las filas que estan ocultas que guardamos dentro de la variable rows, un filtro, donde dicho filtro sólo contendrá/determinará el valor obtenido del loop (:contains( v ) y asegurate de agregarle la propiedad show (para mostrar esas filas que contienen el valor obtenido del indice recorrido por el loop).

Luego, en caso de que en nuestra condición donde evaluamos si la función contenía una longitud valida, es falsa … entonces simplemente muestra todas las filas. Esto es por si el usuario ha dejado en blanco el campo de texto (nuestro buscador de datos de la tabla), se entienda que deben mostrarse todas las filas de la tabla.

Y listo. con esta función podemos recorrer y buscar datos dentro de una tabla, mostrando los datos que coinciden con lo que el usuario va introduciendo en un campo de texto determinado.

¡Espero poder ayudarles cientificos!

¿Te interesaría ver mis consejos sobre la disciplina en la vida y cómo logro obtenerla?
Sigue el siguiente enlace

Éxitos 🙂