Uso de jQuery para presentar y filtrar datos en tablas

Explicamos como mostrar y depurar datos de una tabla mediante jQuery, como dar un estilo adecuado para presentar los datos y como realizar el filtrado de los mismos.

Cuando en un proyecto se presenta la necesidad de mostrar y manejar grandes cantidades de datos, las tablas suelen ser los elementos más adecuados para llevar a cabo su presentación. Si bien, el uso de tablas para la maquetación de sitios ha sido satanizado en los últimos años, su función de despliegue y acomodo de información sigue cumpliendo un papel muy importante para el manejo de contenido.

Cuando este contenido tiende a extenderse demasiado, es recomendable buscar implementar algún tipo de funcionalidad que le permita al usuario filtrar la información, para que de esa manera pueda encontrar de manera más rápida lo que esta buscando. Para lograr esto, se puede recurrir a peticiones a servidor mediante algún lenguaje como PHP, también se puede recurrir a ajax para agregar dinamismo, o simplemente utilizar jQuery para depurar los datos que ya han sido desplegados en la tabla.

Para poder llevar a cabo una sencilla pero eficiente filtración de datos, en este artículo haremos uso de la librería jQuery, explicando cada paso necesario para llegar a la estructura adecuada.

Establecimiento de las tablas

Lo primero que debemos hacer, es establecer las tablas que van a contener los datos que queremos mostrarle al usuario. Para aquellos que tengan un poco de experiencia con HTML, este paso puede parecer bastante sencillo, pero es común que al momento de estructurar una table, el desarrollador tienda a omitir ciertas etiquetas diseñadas para aumentar la semántica del código y crear una especialización de funciones.

Es recomendable hacer uso de etiquetas como “thead”, “tbody” y “th” para que quede bien definida la función de cada parte de la table, y además para que se que nos facilite la manipulación de dicha estructura con JavaScript. La etiqueta “thead” sirve para definir la parte de la table donde se encontrarán los encabezados, cada encabezado de columna deberá ir dentro de una etiquta “th”. Por su parte, la etiqueta “tbody” nos sirve para indicar el incio y el fin del cuerpo de nuestra tabla, dentro de esta sección haremos uso de las etiquetas “tr” para definir filas y “td” para establecer cada celda.

<table id="tablaLaWebera">  
  <thead>  
    <tr>  
      <th>País</th>  
      <th>Capital</th>  
      <th>Moneda</th> 
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>México</td>  
      <td>Ciudad de México</td>  
      <td>Peso</td>
    </tr>  
    <tr>  
      <td>España</td>  
      <td>Madrid</td>  
      <td>Euro</td>
    </tr>  
    <tr>  
      <td>Venezuela</td>  
      <td>Caracas</td>  
      <td>Bolívar</td>
    </tr>  
    ...  
  </tbody>  
</table>

Añadir estilo a las filas

Después de tener nuestra tabla definida, es tiempo de pasar a darle un poco de estilo para hacer que la visualización luzca mejor para el usuario. Un cambio en el CSS que tiende a mejorar en gran medida la experiencia del usuario, es la adaptación de las filas estilo Cebra.

El estilo Cebra hace que las filas pares luzcan de un color distinto a las filas impares, de esa manera el usuario podrá visualizar mejor los datos de cada renglón de la tabla, haciendo que sea más difícil equivocarse y mezclar datos. Esta es una técnica de organización muy recurrida por los diseñadores web, debido a que es muy fácil de aplicar y no requiere de añadir alguna clase de plugin o librería.

Para poder lograr esto, lo primero que debemos hacer es establecer los valores de estilo para la tabla en general:

table {  
  background-color: white;  
  width: 100%;  
} 

Con esto indicamos que el color de la tabla será blanco y que su ancho se estirará hasta topar con el del padre, abarcando así su 100%. Después de esto, pasamos a enfocarnos en los elementos que conforman las filas (tr). Para poder dar estilo a esta parte de la tabla, podemos recurrir a dos métodos.

El primero de ellos requiere de menos codificación y a simple vista puede resultar más sencillo. Su funcionamiento se basa en utilizar el pseudo elemento nth-child de CSS, con él se establecen los valores de estilo para las filas pares (even) y las impares (odd), simplemente enviando como parámetro el valor correspondiente.

tr:nth-child(even){
    background: #FFFFFF;
}
tr:nth-child(odd){
    background: #666666;
}

Con este código las filas pares lucirán de color blanco, mientras que las impares de color gris. El problema con este método, es que no es soportado por todos los navegadores. Para poder lograr una compatibilidad mayor, será necesario recurrir al segundo método:

tbody tr {  
  background-color: #FFFFFF;  
}  
tbody tr.impar {  
  background-color: #666666;  
  color: white;  
}

Este código establece los mismos colores, pero con la diferencia de que para aplicarlo, tenemos que añadir la clase “impar” a las filas que así lo sean. Para poder lograr esto, vamos a recurrir a jQuery y una simple función. Recuerda que para que el siguiente código funcione, debiste haber incluido la librería de jQuery anteriormente en tu código.

jQuery(document).ready(function(){
  filas_cebra('tbody tr:odd', 'impar');  
});  

//función para aplicar la clase
function filas_cebra(selector, clase){  
  jQuery(selector).removeClass(clase).addClass(clase);  
} 

Efecto hover

Para dar un toque más adecuado al estilo de nuestra tabla, podemos hacer que cuando el puntero del mouse se encuentre sobre alguna de las filas, esta cambie de color de fondo para hacerse resaltar sobre las demás. Para poder lograr esto, podemos recurrir a la pseudo elemento “:hover” de CSS.

tbody tr:hover {  
  background-color: lightblue;  
  color: #666666;  
}

Con esta adición, le será más fácil al usuario encontrar y ubicar datos.

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.