Possiamo creare la paginazione per i risultati di una ricerca AJAX con jQuery.
La soluzione è la seguente:
$.paginate = function( element, options ) {
var currentPage = 0;
var numPerPage = options.perPage;
var $element = $( element );
$element.find( options.items ).wrapAll( '<div class="search-body"></div>' );
$element.on( "repaginate", function() {
$element.find( options.items ).hide().slice( currentPage * numPerPage, ( currentPage + 1 ) * numPerPage ).show();
});
$element.trigger( "repaginate" );
var numRows = $element.find( options.items ).length;
var numPages = Math.ceil( numRows / numPerPage );
var $pager = $( '<div id="search-pager"></div>' );
for (var page = 0; page < numPages; page++ ) {
$('<a class="page-number"></a>').text( page + 1 ).on( "click", {
newPage: page
}, function( event ) {
currentPage = event.data[ "newPage" ];
$element.trigger( "repaginate" );
$( this ).addClass( "active" ).siblings().removeClass( "active" );
}).appendTo( $pager );
}
$pager.appendTo( $element );
if( numRows > numPerPage ) {
$( '<a href="#" id="search-pager-prev"></a> ').appendTo( "#search-pager" ).hide();
$( '<a href="#" id="search-pager-next"></a>' ).appendTo( "#search-pager" );
$( "#search-pager-next" ).on( "click", function ( e ) {
e.preventDefault();
currentPage++;
if ( currentPage > 0 ) {
$("#search-pager-prev").show();
}
if ( currentPage === numPages ) {
currentPage = 0;
}
$( "#search-pager .page-number" ).eq( currentPage ).trigger( "click" );
});
$( "#search-pager-prev" ).on( "click", function ( e ) {
e.preventDefault();
currentPage--;
if ( currentPage == 0 ) {
$( "#search-pager-prev" ).hide();
}
if ( currentPage === 0 ) {
currentPage = 0;
}
$( "#search-pager .page-number" ).eq( currentPage ).trigger( "click" );
});
}
};
Il nostro codice inserisce la paginazione solo quando i risultati superano il numero di risultati per pagina. Per evitare di mostrare un numero troppo elevato di link, vengono mostrati solo i link per la pagina successiva e precedente. Esempio d'uso:
$.when( $.getJSON( "/ajax/search", { q: "jQuery" } ) ).done(function( resp ) {
if( resp.results.length > 0 ) {
var html = "";
$.each( resp.results, function( i, result ) {
// Crea il contenuto HTML
});
$( "#search-results" ).html( html );
$.paginate( "#search-results", {
items: ".result",
perPage: 10
});
}
});