In questo articolo, scritto dall’amministratore di qmpeople.com, egli sottopone alla vostra attenzione un paginatore jQuery molto semplice e costituito nientaltro che da una lista di risultati da visualizzare opportunamente marcata con id di classe che permettono a jQuery di definirne la formattazione.
Liste non ordinate intelligenti
Tutti gli sviluppatori conoscono bene le liste non ordinate in quanto permettono di raggruppare logicamente un insieme di elementi creando di fatto un contenuto semantico molto apprezzato anche dai motori di ricerca.
jQuery come noto ci permette di lavorare agevolmente anche con questo tipo di strutture dati arricchendole di eventi o modificandone il layout.
Liste + jQuery: una possibile modalità di utilizzo
Tutto normale fin qui ma la cosa intelligente sta nel fatto che tutte le informazioni utili alla visualizzazione dei singoli item sono cablate direttamente negli attributi della lista! Per chiarire meglio questo aspetto analizziamo passo passo il relativo codice sorgente partendo proprio dalla lista di elementi.
<input id="p_current_page" type=hidden> <input id="p_show_per_page" type=hidden> <input id="p_total_pages type=hidden"> <ul id="topnumbers"> <li id="pt"><h3 id="t-numbers">Numeri da 1 a 10</h3></li> <li class="number"><a name="uno.jpg" class="number_li" href="#">uno</a></li> <li class="number"><a name="due.jpg" class="number_li" href="#">due</a></li> <li class="number"><a name="tre.jpg" class="number_li" href="#">tre</a></li> <li class="number"><a name="quattro.jpg" class="number_li" href="#">quattro</a></li> <li class="number"><a name="cinque.jpg" class="number_li" href="#">cinque</a></li> <li class="number"><a name="sei.jpg" class="number_li" href="#">sei</a></li> <li class="number"><a name="sette.jpg" class="number_li" href="#">sette</a></li> <li class="number"><a name="otto.jpg" class="number_li" href="#">otto</a></li> <li class="number"><a name="nove.jpg" class="number_li" href="#">nove</a></li> <li class="number"><a name="dieci.jpg" class="number_li" href="#">dieci</a></li> <li id="pn"><a onclick="next();return false;" href="#">Next</a></li> </ul>
I primi tre campi nascosti servono rispettivamente per memorizzare il numero di pagina corrente del paginatore, il numero di righe del paginatore ed il numero totale di pagine da cui è costituito
Come anticipato, nell’attributo “name” dei link contenuti nei singoli singoli item della lista è stato inserito il nome del file che verrà utilizzato da jQuery per visualizzare accanto al testo cliccabile una immagine personalizzata. Questo stratagemma risulta particolarmente utile in quanto ci permette di risparmiare costose connessioni http che avremmo dovuto realizzare qualora si volesse recuperare le medesime informazioni in modo dinamico
Riguardo la parte CSS non c’è molto da segnalare eccezion fatta per la diversa formattazione imposta al primo e all’ultimo elemento della lista in quanto rispettivamente header e footer della stessa.
Passiamo quindi all’analisi del codice jQuery
La prima cosa che viene fatta al caricamento della pagina consiste nell’inizializzare i tre campi nascosti per poi richiamare la funzione go_to_page_numbers con paramentro 0 ad indicare che ci si posizionerà nella pagina iniziale del paginatore
$(document).ready(
function(){
var show_per_page=4;
var number_of_items=$('#topnumbers').children().children('.number_li').size();
$('#p_current_page').val(0);
$('#p_show_per_page').val(show_per_page);
$('#p_total_pages').val(Math.ceil(number_of_items/show_per_page));
go_to_page_numbers(0);
}
);La funzione che segue viene richiamata dal link di paginazione e non fa altro che calcolare il numero di pagina a cui si vuole accedere a partire da quella corrente memorizzata nel campo nascosto #p_current_page per poi passarlo alla funzione go_to_page_numbers
function next(){
new_page=(parseInt($('#p_current_page').val())+1) < parseInt($('#p_total_pages').val()) ? parseInt($('#p_current_page').val())+1:0;
go_to_page_numbers(new_page);
}Vediamo dunque come funziona il cuore del paginatore ossia la funzione go_to_page_numbers
function go_to_page_numbers(page_num){
if (page_num==0) {
var show_per_page=parseInt($('#p_show_per_page').val())+1;
}else{
var show_per_page=parseInt($('#p_show_per_page').val());
}
if (page_num==0) {
var start_from=page_num * show_per_page;
}else{
var start_from=page_num * show_per_page+1;
}
var end_on=start_from + show_per_page;
$('#topnumbers').children("li").css('display', 'none').slice(start_from, end_on).css('display', 'block');
$('#pt,#pn').css('display', 'block');
$('#topnumbers').children().children('.number_li').slice(0, 4).each(function (i) {
var n=this.innerHTML;
$(this).replaceWith('<table cellpadding=0 cellspacing=0><tr><td><img class=b width=45 height=45 alt="' + n + '" title="' + n + '" style=vertical-align:middle src=' + this.name.replace(/-/g,'/') + '></td><td>' + '<a class="number_li" href="#">' + n + '</a>' + '</span>' + '</td></tr></table>');
}
);
$('#p_current_page').val(page_num);
}I primi due blocchi if else servono per impostare correttamente il numero di righe da visualizzare in virtù del fatto che scorrendo le varie pagine potrebbe cambiare il numero di elementi
Grazie ai metodi children e slice vengono modificati tutti gli elementi della lista aggiungendovi l’istruzione css display:none che li rende tutti invisibili. (ad eccezione del primo e dell’ultimo)
Subito dopo utilizzando i metodi children, slice ed each prima e replaceWith nell’istruzione successiva, vengono individuati, selezionati e quindi modificati tutti e soli quegli elementi della lista la cui posizione è compresa tra i valori start_from ed end_on in modo tale che al posto dell’item nascosto <li> venga visualizzata una tabella di due colonne che andrà a comporre la struttura desiderata di ogni singola riga del paginatore.
