comparte el articulo 

Uso de jQuery para presentar y filtrar datos en tablas: Parte 2

Actualizado el 24/01/2013 < > 1 Comentario

Resumen: Segunda entrega de este artículo, donde explicamos como realizar el filtrado de los datos que se presentan en un tabla, todo mediante jQuery

Una vez que tenemos nuestra tabla lista para ser presentada en nuestro sitio, con una estructura y estilo adecuado para mostrar la información, es tiempo de empezar a pensar como poder manipular los datos que en ella presentamos. Quizás este tipo de funcionalidad te puede parecer innecesaria hasta cierta instancia, pero una vez que tu tabla empieza a popularse con un gran número de datos, la aplicación de un filtro se vuelve indispensable para conseguir mejores resultados y optimizar la experiencia del usuario.

Como ya explicamos anteriormente, el filtrado de datos en una tabla se puede llevar a cabo mediante distintos métodos, en esta ocasión nosotros nos hemos enfocado en el uso exclusivo de jQuery, sin necesidad de recurrir a llamadas tipo ajax y mucho menos a algún lenguaje de lado servidor.

Nuestro objetivo en esta parte del artículo, es permitir que el usuario utilice un campo de texto en un formulario, para introducir las palabras que quiere localizar dentro de los datos que desplegamos en la tabla. Si bien puede sonar complejo, es algo muy sencillo de realizar gracias al uso de jQuery.

Agregar elementos HTML necesarios

Lo primero que debemos realizar para conseguir la depuración de información, es agregar los elementos que utilizaremos para escribir las palabras claves que se utilizaran para filtrar. Para ello utilizaremos un elemento input de tipo texto, el cual se puede establecer de la siguiente manera:

<label for="buscador">Buscar:</label> <input type="text" id="buscador" value=""/>

En el código agregamos una etiqueta “label” para desplegar un texto relacional antes del recuadro, de esa manera el usuario podrá saber que ese input será utilizado para buscar datos en la tabla que estamos desplegando. En caso de querer establecer una mejor descripción, se puede optar por agregar un texto al atributo value, para que aparezca dentro del cuadro de texto. De esta manera el usuario tendrá mejores instrucciones y el texto se puede remover cuando se de clic sobre el elemento.

<label for="buscador">Buscar:</label> <input type="text" class="texto-gris" id="buscador" value="Agrega la palabra que deseas buscar"/>

Para darle estilo, también se agrego la clase “texto-gris”, la cual también será removida cuando nos enfoquemos en el elemento input.

.texto-gris{
    color: #CCC;
}

Remover texto de instrucción

Para remover el texto que hemos agregado con el fin de dar una descripción extra para la acción a realizar, basta con utilizar el siguiente fragmento de código:

jQuery('.texto-gris').each(function() {            
    var valorActual = jQuery(this).val();

    jQuery(this).focus(function(){                
        if( jQuery(this).val() == valorActual ) {
            jQuery(this).val('');
            jQuery(this).removeClass('texto-gris');
        };
    });

    jQuery(this).blur(function(){
        if( jQuery(this).val() == '' ) {
            jQuery(this).val(valorActual);
            jQuery(this).addClass('texto-gris');
        };
    });
});

Lo que hacemos con esta sentencia, es recorrer cada uno de los elementos que cuentan con la clase “texto-gris”, una vez que estamos dentro del ciclo asignamos el valor actual del elemento a la variable “valorActual”, el cual en este caso sería “Agrega la palabra que deseas buscar”.

Después de esto establecemos dos eventos, el primero de ellos es “focus” el cual indica la acción que se llevará cuando nos enfoquemos en el input, es ahí donde hará una comparación entre el valor que guardamos en la variable “valorActual” y el verdadero valor con el que cuenta actualmente el elemento, si este es igual entonces remueve el valor y la clase para que el usuario pueda añadir las palabras que desee buscar. Por su parte, el evento “blur” sirve para especificar la acción que llevaremos cuando coloquemos el mouse en otra posición que no sea el input, cuando esto suceda verificará que el valor que actualmente tiene el input no este vacío, en caso de ser así añade de regreso el valor que guardamos en la variable y la clase para que el texto luzca gris.

Eventos sobre el elemento input

Después de realizar esta acción, es tiempo de pasar a realizar la función del filtrado. Para poder llevar a cabo esta operación, es necesario recurrir a un evento que se disparará con acciones del teclado sobre nuestro elemento de input de tipo texto.

El evento lleva por nombre “keyup” y se dispará después de levantar una tecla. Como queremos que este evento solo se capture para el elemento input, debemos utilizar un selector con su id para encapsularlo, y de esa manera aplicar la función únicamente a él.

jQuery("#buscador").keyup(function(){
    if( jQuery(this).val() != ""){
        jQuery("#tablaLaWebera tbody>tr").hide();
        jQuery("#tablaLaWebera td:contiene-palabra('" + jQuery(this).val() + "')").parent("tr").show();
    }
    else{
        jQuery("#tablaLaWebera tbody>tr").show();
    }
});

jQuery.extend(jQuery.expr[":"], 
{
    "contiene-palabra": function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || jQuery(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

Dentro de la función del evento, hacemos una comparación del valor del input, si este no es vacío entonces procedemos a realizar el filtrado. Lo primero que hacemos es ocultar todas las filas que componen la tabla, después buscamos la palabra que el usuario a ingresado, esto mediante la función personalizada “contiene-palabra”, la cual se declara extendiendo la funcionalidad de jQuery.

A la función “contiene-palabra” se le pasa el valor del input como parámetro, y en ella se filtran los datos para regresar únicamente las filas que tengan algún valor que coincida con los datos que mandamos. Finalmente las filas que coinciden, se muestran nuevamente con la función “show”.

Ubicación del código JavaScript

Como último consejo, debemos indicarte que la mejor ubicación que le puedes dar a tu código de JavaScript, es la parte inferior de tu archivo, es decir, una vez que has cerrado tu etiqueta body. De esta manera la página cargará más rápido y el JavaScript no tendrá que esperar a que cargue el DOM para llevar a cabo sus acciones, pues este ya estará totalmente cargado.

En caso de colocar el código al principio de la página, dentro de la etiqueta “head”, tendrás que usar la sentencia “jQuery(document).ready()” antes de las acciones que realices con este lenguaje. Esto se hace para poder garantizar que el DOM se encontrará cargado una vez que captures eventos.

Publicado el 24/01/2013, última actualización 24/01/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

1 Comentario

  1. daniel salazar

    No me funciona la segunda parte de filtrar datos en tablas JQuery :/ no me funciona ni el focus :(

    Viernes, 27 de febrero 2015

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras