Vediamo adesso come realizzare una paginazione liste con JQuery andando a caricare n elementi per volta e visualizzarli in una pagina web.
Per la realizzazione viene utilizzato un plugin scritto in javascript che permette di personalizzare a proprio piacimento i contenuti da visualizzare.
Introduzione
In qualche post precedente vi avevo illustrato il funzionamento del plugin “SimplePagination.js”.
Tale plugin permette di effettuare la paginazione di una lista di elementi lato web utilizzando JQuery e quindi senza necessariamente dover refreshare la pagina in cui ci si trova.
A differenza del precedente esempio, nel quale la lista dei risultati veniva caricata interamente all’inizio del processo, in questo esempio la lista viene caricata con n elementi alla volta (nel caso in questione 10 elementi).
Questo è utile nel caso in cui siamo in presenza di una lista con un numero elevato di elementi.
Il consiglio è quello di utilizzarlo quando abbiamo n>5000, per cui non viene appesantita la query e si caricano soltanto gli elementi da visualizzare.
Cosa serve
Per chi non avesse letto l’articolo precedente vi rispiego come scaricare e installare tale plugin all’interno del nostro ambiente di lavoro:
Il plugin di JQuery in questione si chiama simplePagination.js, scaricabile direttamente dal sito del produttore.
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
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 src="<%=request.getContextPath()%>/mio_path_js/jquery.js"></script> <script src="<%=request.getContextPath()%>/mio_path_js/jquery.simplePagination.js"></script> <link type="text/css" rel="stylesheet" href="mio_path_css/simplePagination.css"/>
Prima di utilizzare il plugin caricando n pagine alla volta consiglio prima di leggere il precedente articolo per vedere il funzionamento di base:
$.ajax({
......
......
success: function (response, status, xhr) {
jQuery(function($) {
var pageParts = $(".paginate");
var numPages = countSelect;
var perPage = 10;
pageParts.slice(perPage).hide();
$("#page-nav").pagination({
items: numPages,
itemsOnPage: perPage,
cssStyle: "light-theme",
currentPage: numeroSelezionato,
onPageClick: function(pageNum) {
$("#myModalWaiting").show();
var start = perPage * (pageNum - 1);
var end = start + perPage;
cambiaPagina(start,end,pageNum);
numeroSelezionato = pageNum;
}
});
});
}
)};
Conclusioni
Rispetto al caso precedente, in questo caso passiamo come parametro evidenziato in rosso ‘countSelect’ il numero totale degli elementi (quindi dovra essere eseguita una count(*)per trovare il numero di elementi totali) e il valore ‘perPage’ per indicare il numero di elementi da visualizzare in pagine, in questo caso 10.
La funzione onPageClick si occuperà di selezionare/delezionare i vari numeri di pagina selezionati e di creare i pulsanti avanti/indietro e inizio/fine lista.
Logicamente tale funzione dovrà essere inserita all’interno di una chiamata AJAX e dovrà ricevere come response sia il numero di elementi totali della lista, cioè il valore countSelect, sia gli effettivi n elementi da visualizzare ad ogni click di un numero di paginazione.
Per qualsiasi altra informazione su come utilizzare tale plugin potete lasciare un commento o scrivere in privato.
