jQuery: paginazione delle tabelle

Suddividere una lunga tabella in più pagine con jQuery richiede semplicemente l'utilizzo di alcuni segnaposto (una classe CSS) da inserire nel DOM per marcare le varie sezioni in cui vogliamo dividere la tabella. Una volta inserita questa classe sulle varie righe della tabella, il resto dell'implementazione è abbastanza lineare. Si tenga presente, tuttavia, che per semplificare di molto il nostro lavoro con la tabella è necessario che quest'ultima sia marcata correttamente, ossia che presenti almeno le sezioni thead e tbody. Vediamo insieme i dettagli dell'implementazione.

La nostra tabella ha 4 colonne e 30 righe. Vogliamo suddividerla in tre pagine da 10 righe ciascuna. Ci interessano ovviamente solo le righe all'interno dell'elemento tbody, non quella delle intestazioni.

Creiamo un oggetto Paginator e definiamo una proprietà per il riferimento alla tabella e una per il numero delle pagine:

var Paginator = new function() {

	var table = $('#paginated');
	var numberOfPages = 3;
	
}();

Ora usiamo l'operatore modulo combinato con il metodo index() per selezionare solo le righe multiple di dieci. Quindi vi aggiungiamo la classe page:

var generate = function() {
	
		$('tbody tr', table).each(function() {
		
			var $tr = $(this);
			
			if($tr.index() % 10 == 0) {
			
			
			
				$tr.addClass('page');			   			
			}
		
		
		});
		
	
};

Il metodo index() di jQuery restituisce l'indice numerico della posizione dell'elemento nel DOM. Quindi abbiamo selezionato solo le righe che ci interessano. A questo punto possiamo generare i link per la paginazione. Imposteremo su di essi un attributo rel incrementale che corrisponde all'indice corrente delle righe con classe page:

var paginate = function() {
	
		$('tr.page', table).each(function(i) {
		
			var $a = $('<a/>').attr({href: '#', rel: i}).text(i+1);
			$a.appendTo('#pagination');
			
			return i < (numberOfPages - 1);
		
		
		});	
				
	    $('tbody tr', table).hide();
};

Spieghiamo il codice:

1. Abbiamo tre pagine, quindi l'indice del set tr.page non deve superare 2 (l'indice inizia sempre da 0)
2. L'attributo rel viene impostato su tale indice (0, 1, 2)
3. Il testo dei link viene impostato sull'indice più uno, in modo da avere 1, 2, 3
4. Il loop di jQuery termina tramite l'istruzione return quando raggiunge 2 (ossia il numero delle pagine meno 1)
5. Tutte le righe della tabella vengono nascoste, eccetto quella delle intestazioni.

Ora non ci resta che associare un'azione a ciascun link:

var showPages = function() {
	
		$('a', '#pagination').each(function() {
		
			var $a = $(this);
			var rel = $a.attr('rel');
			var pages = $('tr.page', table);
			
			$a.click(function(event) {
			
			    $('tr', table).not(':first').slideUp();
			
				pages.eq(rel).nextUntil('tr.page').andSelf().
				slideDown('slow');
			
				event.preventDefault();
			});
		
		
		});
	
	
};

Usiamo il valore dell'attributo rel dei link per selezionare la riga corrispondente con classe page. Quindi usiamo il metodo nextUntil() per selezionare la riga corrente e tutti i suoi fratelli fino alla successiva riga con classe page.

Il nostro oggetto termina con il metodo pubblico init(), che lancia il codice:

this.init = function() {
	
		generate();
		paginate();
		showPages();
	
};

Richiamiamo l'oggetto in questo modo:

$(function() {

	Paginator.init();

});

Potete visionare l'esempio finale in questa pagina.