Cuando tenemos que mostrar una tabla con una gran cantidad de datos y varias columnas es útil tener el nombre de las columnas de la tabla a la vista para poder diferenciar los datos de forma rápida sin tener que volver a la cabecera de la tabla.

Con una simple tabla HTML no podremos hacer esto, pero si le añadimos algo de jQuery podremos hacerlo.

Podríamos programar un pequeño script en jQuery para hacer esta función, pero habiendo muchos plugins ya desarrollados que hacen esta tarea, ¿para qué perder más tiempo?.

El plugin del que vamos a hablar es jQuery Thead.

Este plugin es totalmente gratuito tanto para uso personal como comercial, bajo licencias MIT y GPL.

Su uso es realmente sencillo:

Añadimos la librería jQuery:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Añadimos la librería de jQuery Thead:

<script type="text/javascript" src="jquery.thead-1.1.min.js"></script>

Y por último, una vez cargada la página, le decimos en qué tabla queremos activar el plugin.

$(function() {
       $('.miTabla').thead();
});

Y listo, nuestra tabla con la clase “miTabla” tendrá las cabeceras siempre visibles, por mucho scroll que hagamos en la tabla.

 

Podéis obtener más información y ver un demo en su página oficial:

http://www.asual.com/jquery/thead/samples/

 

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR