DataTables: plugin jQuery (II)


Vă amintiţi că acum câteva săptămâni am scris despre pluginul jQuery intitulat DataTables? Cu ceva întârziere revin la subiect cu o problemă care sunt sigur că e de interes pentru noi: formatul datei. Yep… clasica problemă că nu suntem americani :) . Dar haideţi să o luăm cu începutul. Rămânând la ultimul exemplu din articolul trecut, am schimbat doar tabela. Acum a doua coloană conţine cod HTML (respectiv sunt nişte linkuri, fictive), iar a treia conţine date, aşa cum le scriem noi în mod normal. Încercaţi să sortaţi după a doua şi a treia coloană. Hopa! Nu merge!

De ce? Pentru că în ambele cazuri conţinutul (respectiv codul HTML cu link, iar apoi data) sunt luate ca texte (stringuri) şi sortate ca atare. Trebuie să îi spunem să trateze altcumva acele coloane. În DataTables e simplu pentru că avem parametru sType (vedeţi vă rog la documentaţia, pagina pentru Columns). Dacă îi dăm valoarea html atunci partea HTML este eliminată şi sortarea va fi cu adevărat după numele oraşelor. Problemele apar la dată (dacă punem date nu ajunge). Există un plugin la plugin 😉 care să ajute la problema când data nu e scrisă după sistemul american, dar codul e imperfect (în special când aveţi şi câmpuri goale). După ce am săpat în codul DataTables ca să înţeleg cum funcţionează am făcut propriile mele funcţii. În ele vedeţi delimitatorul punct: dacă Dvs folosiţi liniuţa (ex: 13-02-2010) atunci pur şi simplu înlocuiţi în cod, unde apare ‘.’, cu ‘-‘. Vedeţi mai jos codul (am eliminat ca să îl scurtez partea cu localizarea în română). Mai exact primele două funcţii şi acolo unde scrie aoColumns. La prima coloană, nefiind nevoie de ceva special pentru sortare, punem null.

$(document).ready(function(){
	jQuery.fn.dataTableExt.oSort['rom_date-asc']  = function(a,b) {
		var ukDatea = a.split('.');
		var ukDateb = b.split('.');
		var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
		var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
		if(a.indexOf('.')==-1) x=19000000;
		if(b.indexOf('.')==-1) y=19000000;
		return ((x < y) ? -1 : ((x > y) ?  1 : 0));
	};
	jQuery.fn.dataTableExt.oSort['rom_date-desc'] = function(a,b) {
		var ukDatea = a.split('.');
		var ukDateb = b.split('.');
		var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
		var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;
		if(a.indexOf('.')==-1) x=19000000;
			if(b.indexOf('.')==-1) y=19000000;
		return ((x < y) ? 1 : ((x > y) ?  -1 : 0));
	};
	$('#persoane').dataTable({
		"iDisplayLength": 20,
		"bLengthChange": false,
		"bJQueryUI": true,
		"aoColumns": [
				null, { "sType": "html" },{ "sType": "rom_date" }
			]
	}
});

Puteţi testa mai jos: merge! Şi vă invit să nu vă opriţi aici. Tot la aoColumns mai putem face diverse lucruri: de exemplu să punem, cu virgulă, după „sType”: „rom_date” următoarea secvenţă „asSorting”: [ „asc” ]. Ce efect va avea? Coloana a treia va fi sortabilă doar crescător (poate fi util uneori). Dacă vreţi să nu apară o coloană, puneţi „bVisible”: false. Dacă vreţi să nu se opereze căutări în acea coloană, puneţi „bSearchable”: false. Iată câteva exemple care sper să vă dea de înţeles cât de puternic este acest plugin jQuery pentru tabele.


Apreciază articolul:

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

1 comentariu

  1. Dan spune:

    Ceva mai complet, include inline edit, export etc: http://www.sigmawidgets.com/products/sigma_grid2/
    Licenta LGPL


Lasă un răspuns

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