Plugin : Fijar cabecera de una tabla

Plugin : Fijar cabecera de una tabla

En un post anterior había publicado como podemos fijar la primera fila de una tabla con la ayuda de jQuery y hojas de estilos, para mis aplicaciones esta actividad se volvió algo común así que preferí hacer mi primer plugin jQuery para hacer transparente y mas fácil el fijar la primera fila de mis tablas.
La función se llama TableScroll porque realmente eso es lo que hacemos con el código, colocar la tabla dentro de un contenedor y mostrar el scroll para poder recorrer las filas de la tabla.
La función actual directamente sobre una tabla y básicamente lo que se hace es:
1. Recuperar la referencia a la primera fila var trCab = this.find('tr:first');
2. Aplicamos el estilo a la primera fila para que se quede fija dentro del contenedor
3. Con ayuda de jQuery incluimos la tabla dentro de un div que se va a llamar tbScrollContainer
4. Fijamos el contenedor a las dimensiones de ancho y alto que recibe la función y mostramos el scroll
Si nos fijamos con atención no es complicado el proceso a seguir y mucho menos escribir la función usando jQuery
Luego la llamada desde nuestra página ASPX sería:
$(document).ready(function(){ $('#NombreTabla').tableScroll('100%',500); })
Y el código del plugin jQuery, este es uno de los códigos jQuery que me ha tomado más tiempo hacer y ha sido el de mayor utilidad en mis aplicaciones
También pueden revisar

// JScript File
(function($) {
$.fn.tableScroll = function(tableWidth,tableHeight)
{
if (typeof(this) != 'undefined')
{
this.css('width', '98%');
//Fijamos la primera fila
var trCab = this.find('tr:first');
with (trCab){
css('position','relative');
css('top','0');
css('width','100%');
css('background-color','White');}
//Incluimos un <div> que es el contenedor de la tabla
// y que va a mostrar el scroll
this.wrap('<div id='tbScrollContainer'></div>');
var containerEl = $('#tbScrollContainer');
with (containerEl){
css('overflow','auto');
css('height',tableHeight);
css('width', tableWidth);}
}
}
})(jQuery);

2 comentarios:

CSSeductor dijo...

Podrias pasar la maqueta completa?

CSSeductor dijo...

Podrías poner la maqueta completa (código fuente ejecutable)