Paginazione in JS

Pulsanti "avanti" ed "indietro"
à? il metodo di navigazione più appropriato quando l'utente deve seguire rigorosamente la cronologia delle pagine, come in una serie di lezioni, un racconto etc.

Elenco delle pagine cliccabili
Questo elenco viene utilizzato invece nel caso di una lista di pagine che possiamo visitare anche non in ordine cronologico, come una galleria di foto, immagini etc.

Vediamo come creare velocemente, sia l'uno che l'altro codice l'unica cosa che abbiamo bisogno di sapere per realizzare il codice è a che pagina ci troviamo ed il numero totale delle pagine.

Creiamo il codice all'interno di un nuovo documento "pagine.js" che poi collegheremo alle pagine del nostro sito.

Cominciamo con la prima versione "<< - >>"
Ad esempio vogliamo far apparire i pulsanti di navigazione per la pagina5.htm una volta inserito il codice all'interno della pagina...

<script type="text/javascript">pagine(5,8);</script>

ottenendo come risultato

<< 5 di 8 >>

è la versione più semplice in quanto utilizza unicamente la funzione condizionale IF.
la funzione pagine accetta il numero della pagina corrente ed il numero delle pagine totali.

• il pulsante "<<" deve essere un collegamento alla pagina4.htm;
• il pulsante ">>" deve essere un collegamento alla pagina6.htm;

function pagine(pag,tot) {
   if (pag>1) {
    i=(pag-1);
    document.write("<a href="pagina"+i+".htm'">&lt;&lt;</a>");
   }
    document.write(""+pag+" pagine di "+tot+" ");
    if (pag<tot) {
    i=(pag+1);
    document.write("<a href="pagina"+i+".htm'">&gt;&gt;</a>");
    }
  }

Versione con elenco delle pagine
Ad esempio vogliamo far apparire l'elenco dei pulsanti di navigazione per la pagina3.htm una volta inserito il codice all'interno della pagina...

<script type="text/javascript">elenco(3,7);</script>

ottenendo come risultato:

1 2 3 4 5 6 7

è la versione che utilizza in modo incrociato il ciclo FOR con il ciclo IF

function elenco(pag,tot) {
   for (i=1;i<=tot;i++) {
     if (i==pag) {
      document.write("<b>"+i+"</b> ");
     } else {
      document.write("<a href="pagina"+i+".htm'">"+i+"</a>");
     }
   }
}

Si consiglia creare il file pagine.js che comprende entrambi i codici e collegarlo ai file del nostro sito attraverso il seguente collegamento:

<script type="text/javascript" src="scripts/pagine.js"></script>

ed inserire nella posizione opportuna uno dei due codici...

<script type="text/javascript">pagine(5,8);</script>

<script type="text/javascript">elenco(3,7);</script>