comparte el articulo 

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

Actualizado el 23/01/2013 < > 1 Comentario

Resumen: Primera parte de un artículo donde explicamos como mostrar y depurar datos de una tabla mediante jQuery, en esta entrega explicamos como dar un estilo adecuado para presentar los datos en una tabla,

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.

Publicado el 22/01/2013, última actualización 23/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. jonathan

    hola amigo, No hay demo?

    Martes, 15 de julio 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras