• post precedente : differenze via jQuery - 1/2
• indice tutorial

Aggiungiamo la toolbar per la paginazione.

Per aggiungere una struttura xhtml posso usare tante tecniche.
Un sistema di template sarebbe l’ideale. Perchè renderebbe più chiaro il codice xhtml.
Se dovessi scegliere forse salverei un file xhtml e lo inietterei via ajax nella nostra pagina (AHAH).

Ma aggiungerei “troppa carne al fuoco” e soprattutto dovrei gestire la callback e la chiamata asincrona.

Manca una sintassi “HEREDOC” stile perl/php.

Uso una tecnica simile:

var _toolbar = "\
<div class='jp-toolbar'>\
    <span class='left'>Page:  </span>\
    <span class='right'>\
        <span class='numbers'>\
        </span>\
    </span>\
</div>\
";

Questa variabile è stata costruita sulla base del nostro studio iniziale. Non ci sono ancora i link alle pagine. Non posso sapere a priori il numero di pagine. Ho usato gli apici singoli all’interno dei tag per rendere più chiaro il codice (altrimenti avrei dovuto “escapare“).

Ho inserito delle classi css perchè successivamente ne avrò bisogno.

Aggiungo la toolbar sopra e sotto il contenuto.

  jQuery(".target").append(_toolbar);
  jQuery(".target").prepend(_toolbar);

I metodi perfetti, quelli che avresti sempre desiderato avere, senza navigare come un ubriaco il DOM!

Tutti questi metodi (append, prepend, wrap, wrapAll li trovate nella sezione DOM della reference jQuery).

Aggiunta la toolbar aggiungiamo le pagine (contenitori dei record).
Innanzitutto aggiungiamo una variabile provvisoria per la pagina corrente:

var _page = 1;

Dopodichè nel ciclo che già ho scritto per navigare le pagine aggiungiamo la logica per la toolbar.
Potrei dividere per chiarezza le due fasi. Due funzioni… due metodi di una classe.

Ma ora facciamo il “rozzo main”.

La programmazione è fatta di iterazioni e refactory continui del codice. Almeno io faccio così.

if(_x==1 && _pages > 1)
    jQuery('<a href="#" class="prev"><< prev</a><span> | </span>')
    .appendTo(".jp-toolbar > .right > .numbers");

if(_x == _page){
    jQuery('<a class="jp-handler jp-active" href="#'+_x+'"></a>')
    .text(_x)
    .appendTo(".jp-toolbar > .right > .numbers")
}else{
    jQuery('<a class="jp-handler" href=\"#'+_x+'\"></a>')
    .text(_x)
    .appendTo(".jp-toolbar > .right > .numbers");
}

jQuery("<span> | </span>")
.appendTo(".jp-toolbar > .right > .numbers");

if(_x == _pages && _pages > 1)
    jQuery('<a href="#" class="next">next >></a>')
    .appendTo(".jp-toolbar > .right > .numbers");

Cosa notare qui?

appendTo invece di append.

Utilissimo. Se sono in fase di creazione wrappo il mio nuovo elemento con jQuery e attraverso la chinability setto tutto quello che devo settare e all’ultimo appendo l’elemento alla nostra destinazione finale.

Notare come cambia la prospettiva tra append() e appendTo(). append() lo uso quando il soggetto della frase è il target. Quando uso appendTo() il soggetto è solitamente un nuovo elemento e il target invece diventa l’argomento di appendTo().

Notare l’uso del metodo text() invece della concatenazione classica di stringhe giusto per una maggiore eleganza.

I selectors sono arricchiti del simbolo > che indica “figli di” e rende la query più specifica ad un contesto particolare.

Non ci rimane che nascondere le pagine e visualizzare la pagina corrente più un paio di finezze. Un operazione veramente banale con i metodi jQuery:

 var _jpages = jQuery(".jp-page");
 _jpages.hide();
 _jpages.eq((_page - 1)).show();

 if(_page == 1)
    jQuery(".prev").hide();
 if(_page == _pages)
    jQuery(".next").hide();

Qui vediamo come abbiamo prima nascosto tutte le pagine (precedentemente create attraverso wrapAll) e poi visualizzato solo quella corrispondete all’indice (_page - 1). L’indice di un array parte da 0. La pagina corrente è la 1.

Notare l’uso di hide() e show() per visualizzare e nascondere un elemento. Lavorano sulla proprietà css display.

Notare come alcuni if sembrino inutili. La pagina iniziale è sempre 1. Perchè quegli if su prev e next?
Vedremo che c’è una particolare tecnica basata sul “segnalibro” o ancora (#segnalibro) per determinare la pagina corrente.

Notare anche come la programmazione sia volutamente rozza e procedurale. Sto buttando giù l’algoritmo in maniera grezza. Più è brutta la prima versione e più “sarò costretto” a fare almeno una riscrittura del codice (refactory).

Ora possiamo passare agli eventi.

DEMO

[... continua]