Paginazione liste con JQuery (Parte1/2) - SimplePagination.js

[Articolo aggiornato il 22 Gennaio 2019]

Tabella dei Contenuti

Introduzione

A volte si ha la necessità di utilizzare una paginazione lato web all’interno di una lista per fare in modo di organizzare i contenuti all’interno delle pagine paginandoli in maniera personalizzata.

Lo scopo è quello di permettere di scorrere di pagina in pagina o di passare da inizio a fine lista senza dover necessariamente contattare il server ma effettuando tale operazione direttamente sulla pagina web.

Premetto che nell’esempio di oggi si ipotizza che la lista dei risultati sia caricata interamente all’inizio del processo.

Quindi il plugin che andrò a illustrarvi si occuperà di prendere la lista che gli arriverà e paginarla a nostro piacimento.

Cosa serve

Nei prossimi post vi mostrerò come sia possibile, utilizzando sempre lo stesso plugin, caricare la lista con n elementi alla volta (ad es. i primi 10 elementi).

A ogni click sul numero di pagina del paginatore ricaricare la lista con altri elementi (ad es. cliccando sul numero 3 avere gli elementi della lista che vanno dal 21 al 30).

Si utilizza un plugin di JQuery chiamato simplePagination.js, scaricabile qui.
Una volta scaricato il file .zip estraiamolo.
Di tutti i files contenuti al suo interno a noi interesseranno solamente due:

jquery.simplePagination.js
     simplePagination.css

Come funziona

Prendiamo questi due files e copiamoli nel nostro progetto nelle relative cartelle in cui abbiamo i nostri files .js e .css rispettivamente.
Una volta copiati, dobbiamo inserire nella pagina in cui abbiamo bisogno del paginatore i riferimenti ai due files precedenti:

<script type="text/javascript" src="mio_path_js/jquery.js"></script>
<script type="text/javascript" src="mio_path_js/jquery.simplePagination.js"></script>
<link type="text/css" rel="stylesheet" href="mio_path_css/simplePagination.css"/>

Ho inserito anche il riferimento a JQuery che dovrà essere utilizzato per poter far funzionare tale plugin.
Una volta fatto questo non resta altro che richiamare una funzione JQuery per far in modo che in base alla lista ricevuta venga creato il paginatore. La funzione in questione è del tipo:

$(function() {
    $(selector).pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

Questo è il caso più semplice che si può utilizzare in cui gli viene detto che il numero di elementi totali della lista è 100 e lui deve visualizzare 10 pagine alla volta usando quel cssStyle di default.

Il campo evidenziato in rosso sta ad indicare il punto in cui vogliamo che venga inserito il paginatore.
Se abbiamo una <table> con i risultati dovremmo mettere il paginatore in basso in un tag separato.
Facciamo un esempio:

<table>
    <tr>
        <th>
            <td>
                //Campi della lista
            </td>
        </th>
     </tr>
</table>
<div id=”id_paginator“></div>

Supponendo di avere una struttura HTML di questo tipo, ho inserito dopo la chiusura della tabella un altro div con un preciso id, in questo caso id_paginator, che serve a far capire al plugin che il paginatore dovra essere inserito a chiusura della table in quel tag con quel determinato id.

Risultato finale

Quindi la funzione precedente sarà di questo tipo:

$(function() {
    $("#id_paginator").pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

ed il risultato finale sarà una cosa del genere, in cui a ogni click su una determinata pagina il plugin si preoccuperà di farci visualizzare gli elementi in quell’intrvallo senza che noi ci preoccupiamo di altro.

Le varie visualizzazioni variano in base al cssStyle impostato, nel notro caso “light-theme” verrà mostrato il primo paginatore.