Fijar los encabezados de una tabla con jQuery

(by: http://www.kabytes.com)

Fijas las cabeceras de una tabla puede resultar una practica muy útil en tablas muy largas en donde debemos desplazarnos y la cantidad de datos hace que identificar cada columna se torne una tarea demasiado dificultosa.

Para fijar las cabeceras podemos utilizar varias técnicas, la clásica es hacerlo mediante CSS, no obstante hacerlo de esta manera presenta algunas dificultades, en su mayoría relacionadas a la compatibilidad con los distintos navegadores. Para solventar este inconveniente podemos utilizar jQuery, en particular el plugin Chromatable, completamente gratuito y muy fácil de usar.

Chromatable fija las cabeceras y muestra el contenido de la tabla mediante un scroll, de esta manera podemos desplazarnos por la tabla sin perder de vista la correspondencia entre las distintas columnas.

Así se ven las tablas utilizando el plugin:

tablas con scrool utilizando jQuery

Utilizar este plugin es muy simple. Por un lado debemos vincular las hojas de estilo y el archivo JavaScript correspondiente al plugin:

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.chromatable.js"></script>

Luego debemos inicializar el plugin indicando el ID o clase de la tabla a la que le queremos aplicar este formato:

$("#TablaID").chromatable({
        width: "900px",
        height: "400px",
        scrolling: "yes"
});

El autor de este fantástico plugin aclara que pueden presentarse algunos problemas con IE6 y Opera. En cuanto a IE6 no hay planes de dar soporte, en cambio con Opera el autor planea solucionar los inconvenientes en futuras versiones.

Web: Chromatable


original post: http://www.kabytes.com/programacion/fijar-los-encabezados-de-una-tabla-con-jq…

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: