DataTables: plugin jQuery (I)


Acum vreo două luni am scris vag despre Tabele interactive cu jQuery. Între timp am avut nevoie pentru un proiect de pluginul jQuery intitulat DataTables aşa că mi-am propus să scriu mai pe larg despre el, dat fiind că este teribil de util. Eu îl folosesc cu nişte date private, aşa că am căutat un XLS public şi am găsit ceva date cu populaţia pe judeţe, pe localităţi. Am ales Clujul: în prima coloană sunt localităţile din judeţ, în a doua numărul de locuitori, în a treia numărul de locuitori sub 18 ani. În fine, datele în sine nu contează, dar îmi trebuiau pentru demonstraţie. Le-am aranjat într-un tabel normal şi ca să fac tabelul să fie dinamic am adăugat câteva linii (3-9), iar la tabel am pus şi mai rar folositele thead şi tbody. Vedeţi mai jos o parte din cod (sunt zeci de localităţi, ar fi fost prea lung codul), iar dacă vreţi să vedeţi tot codul priviţi în sursa acestei pagini.

[HTML]<html>
<head>
<link rel="stylesheet" type="text/css" href="css/demo_table.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$(‘#orasecluj’).dataTable();
});
</script>
</head>
<table width="100%" id="orasecluj">
<thead><tr><th>Oras</th><th>Populatie</th><th>Sub 18 ani</th></tr></thead>
<tbody>
<tr><td>CLUJ-NAPOCA</td><td>306474</td><td>262386</td></tr>
<tr><td>CAMPIA TURZII</td><td>26394</td><td>21844</td></tr>

<tr><td>VULTURENI</td><td>1447</td><td>1209</td></tr>
<tbody>
</table>
</body>
</html>[/HTML]

Şi ce-am obţinut? Uau! Fără prea mare efort avem deja datele puse pe pagini (în loc să defilezi în jos dai la pagina următoare de date), şi în plus avem şi o funcţie de căutare. Scrieţi acolo ceva şi veţi vedea că instant lista se „subţiază” pe rezultatele dorite! Mai mult: daţi click pe coloane şi veţi vedea că se sortează imediat! Totul cu „costul” a câteva linii de cod.

Dar dorim mai mult, nu? De exemplu prima chestiune care m-a interesat a fost: pot să am în română? Da, se poate. Şi foarte simplu. la dataTable putem să adăugăm diverşi parametrii. În plus am schimbat stilul de paginare. Redau acum doar partea JavaScript modificată, dar în sursa acestei pagini vedeţi tot codul.

$(document).ready(function(){
	$('#orasecluj').dataTable({
		"sPaginationType": "full_numbers",
		"oLanguage": {
				"sProcessing":   "Procesează...",
				"sLengthMenu":   "Afişează _MENU_ linii pe pagina",
				"sZeroRecords":  "Nu am găsit nimic...",
				"sInfo":         "Afişate de la _START_ la _END_ din _TOTAL_ linii",
				"sInfoEmtpy":    "Afişate de la 0 la 0 din 0 linii",
				"sInfoFiltered": "(filtrate dintr-un total de _MAX_ linii)",
				"sInfoPostFix":  "",
				"sSearch":       "Caută:",
				"sUrl":          "",
				"oPaginate": {
					"sFirst":    "Prima",
					"sPrevious": "Preced.",
					"sNext":     "Următ.",
					"sLast":     "Ultima"
				}
			}
	});
});

Observaţi mai jos că avem totul în română şi în plus sistemul de paginare s-a schimbat.

Suntem şi mai pretenţioşi? Se poate. Să facem să arate şi mai bine tabelul. Chiar acum câteva zile (evident, nu întâmplător 😉 ) am vorbit despre ThemeRoller pentru jQuery – m-am folosit de acest instrument pentru a crea o temă. Am salvat-o şi inclus-o în testul cu tabele. Cheia este „bJQueryUI”: true în partea JavaScript, dar vedeţi mai exact în codul sursă al acestei pagini. Mai jos vedeţi direct rezultatul.

Într-un alt material vom vedea nişte cazuri speciale (precum sortarea când avem date, HTML…). Vă invit până atunci să vedeţi documentaţia pentru a afla cum puteţi face să fie afişate toate datele (dacă nu doriţi paginare), alţi parametrii pentru aspect şi funcţionalitate. Cei care doresc, pot să descarce de aici exemplele de mai sus, într-o arhivă ZIP. Să vă fie de folos!


Apreciază articolul:

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

3 comentarii

  1. Alex Badila spune:

    Iti recomand sa incerci si MooDataTable, un plugin MooTools foarte interesant.

  2. radu.capan spune:

    Multumesc. Nu prea folosesc MooTools, fiind mai apropiat de jQuery. Dar sunt deschis si spre alternative.

  3. Necula Gabriel spune:

    Salut!
    Scrii ceva te rog (cu exemple de cod) despre DataTables: plugin jQuery cu posibilitatea de generare dinamica a tabelului (de preferat datele sa fie preluate in format JSON) si mai ales despre modul de a edita continutul unei celule si de a salva datele editate (in server). Totul cu AJAX desigur.
    Bafta!


Lasă un răspuns

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