Cap de tabel plutitor


Zilele acestea am ajuns să am un tabel cam luuuung, la care doream totuşi omul când îl vede să ştie mereu capul de tabel. Prima mea idee a fost să repet capul de tabel, eventual pe secţiuni, astfel încât să fie mereu sub ochi. Nu era cea mai elegantă soluţie: de preferat este un antet care să plutească în partea de sus a ferestrei, atâta timp cât tabelul este în “vizor”. Am căutat imediat o variantă cu jQuery şi evident că sunt multe. M-am oprit în cele din urmă la cea prezentată pe TechRoz.com (ciudat nume, nu?): Floating Header in HTML using JQuery.

imagine

Partea foarte bună este că merge şi cu ultima versiune a bibliotecii jQuery, pe lângă faptul că la mine a mers ca uns. Trebuie ca la tabel să adaugi id="TBL" name="TBL", după care mai este nevoie doar de următorul cod. Ah, desigur, partea de antet trebuie definită între thead, cu tr şi th (în loc de td). Astfel scriptul va şti care e capul de tabel. Captura de mai sus nu spune teribil de multe (efectul fiind unul vizual), dar puteţi vedea aici demonstraţia autorului. Eu am folosit scriptul într-un sit WordPress. Tot ce a trebuit să fac a fost să înlocuiesc în codul de mai jos $ cu jQuery. Atât! În rest a mers perfect!

function UpdateTableHeaders() {
	$("div.divTableWithFloatingHeader").each(function() {
		var originalHeaderRow = $(".tableFloatingHeaderOriginal", this);
		var floatingHeaderRow = $(".tableFloatingHeader", this);
		var offset = $(this).offset();
		var scrollTop = $(window).scrollTop();
		if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {
			floatingHeaderRow.css("visibility", "visible");
			floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");
			// Copy cell widths from original header
			$("th", floatingHeaderRow).each(function(index) {
				var cellWidth = $("th", originalHeaderRow).eq(index).css('width');
				$(this).css('width', cellWidth);
			});
			// Copy row width from whole table
			floatingHeaderRow.css("width", $(this).css("width"));
		}
		else {
			floatingHeaderRow.css("visibility", "hidden");
			floatingHeaderRow.css("top", "0px");
		}
	});
}

$(document).ready(function() {
	$("table#TBL").each(function() {
		$(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>");
		var originalHeaderRow = $("tr:first", this)
		originalHeaderRow.before(originalHeaderRow.clone());
		var clonedHeaderRow = $("tr:first", this);
		clonedHeaderRow.addClass("tableFloatingHeader");
		clonedHeaderRow.css("position", "absolute");
		clonedHeaderRow.css("top", "0px");
		clonedHeaderRow.css("left", $(this).css("margin-left"));
		clonedHeaderRow.css("visibility", "hidden");
		originalHeaderRow.addClass("tableFloatingHeaderOriginal");
	});
	UpdateTableHeaders();
	$(window).scroll(UpdateTableHeaders);
	$(window).resize(UpdateTableHeaders);
});


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

2 comentarii

  1. Kun Ladislau spune:

    Pentru aşa ceva există facilităţile din din excel. Selectez rândul de sus, unde am introdus capul de tabel, merg în view, şi selectez din freeze panes modelul care-mi convine.
    Sunt foarte mulţumit.

  2. radu.capan spune:

    De acord, dar eu vorbeam despre un tabel dintr-o pagină web, dintr-un sit. Vizitatorii să poată vedea valorile din tabel fără a memora capul de tabel. E altceva deci.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *