Tabele interactive cu jQuery


Ştim că tabelele curat HTML sunt plictisitoare. Cu ceva CSS pot arăta mai special, dar le lipseşte nativ interactivitatea. Evident că celebra bibliotecă jQuery dă aripi webmasterilor, chiar dacă, în mod puţin ciudat, încă jQuery UI nu include ceva efecte special pentru tabele. Dar sunt alţi programatori pe piaţă care şi-au pus mintea la contribuţie scriind pluginuri mai simple sau mai elaborate. Voi prezenta câteva dintr-o listă mai luuungă apărută acum câteva zile pe TripwireMagazine: 25+ Highly Useful jQuery Plugins Bringing Life back to HTML Tables. Şi am să încep cu un efect banal, de “deschidere” sub o linie de tabel, util când vreţi să arătaţi mai multe informaţii. Janko a scris despre acest efect aici (demo).

imagine

Crescând puţin complexitatea, cu jQuery mai putem obţine un efect interesant: păstrarea capului de tabel vizibil. Se întâmplă uneori să avem tabele cu multe, foarte multe linii, astfel că dacă navigatorul coboară în pagină riscă să nu mai ştie a treia coloană ce reprezintă. jQuery floating table header plugin (demo) rezolvă dilema: antetul tabelului va pluti, astfel că rămâne în pagină nu mereu ci doar atâta timp când în partea vizibilă există o parte din tabel. O altă abordare vine dinspre Chromatable JQuery Plugin: tabelul, oricât de lung, este  afişat într-un spaţiu limitat, cu bară de defilare. Din nou avem deci antetul mereu vizibil, doar că în locul derulării paginii avem derularea strict a tabelului. Elegant!

imagine

Dacă vrem mai mult atunci probabil ne interesează să putem sorta coloanele fără reîncărcarea paginii. Flexigrid pornise cu avânt acum mai bine de un an dar se pare că proiectul a fost abandonat :( . Păcat. Dincolo de unele buguri era fără îndoială promiţător. Aşa că acum dacă ar fi, v-aş recomanda un alt plugin: DataTables (multe exemple). Acesta nu doar oferă posibilitatea de a da click pe numele unei coloane pentru sortare, ci are un întreg arsenal de facilităţi. De exemplu include ceea ce oferă pluginul amintit iniţial, al lui Janko. Permite modificarea dinamică a tabelelor (ex: adăugarea de noi linii), sortare multiplă, evenimente diverse, paginarea conţinutului, ascundere coloane/linii ş.a.

imagine

Vă las restul pluginurilor jQuery legate de tabele să le descoperiţi din articolul citat la început. Dacă folosiţi pluginuri jQuery pentru tabele nu ezitaţi să le indicaţi mai jos în comentarii.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

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