Se vogliamo implementare una semplice paginazione lato client per le tabelle HTML jQuery è un'ottima soluzione.
Possiamo implementare il seguente plugin jQuery:
(function( $ ) {
$.fn.paginate = function( n ) {
return this.each(function() {
var currentPage = 0;
var numPerPage = n;
var $table = $( this );
$table.on( "repaginate", function() {
$table.find( "tbody tr" ).hide().slice( currentPage * numPerPage, ( currentPage + 1 ) * numPerPage ).show();
});
$table.trigger( "repaginate" );
var numRows = $table.find( "tbody tr" ).length;
var numPages = Math.ceil( numRows / numPerPage );
var $pager = $( "<div class='pager'></div>" );
for ( var page = 0; page < numPages; page++ ) {
$( "<span class='page-number'></span>" ).text( page + 1 ).on( "click", {
newPage: page
}, function( event ) {
currentPage = event.data["newPage"];
$table.trigger( "repaginate" );
$( this ).addClass( "active" ).siblings().removeClass( "active" );
}).appendTo( $pager );
}
$pager.insertBefore( $table ).find( "span.page-number:first" ).addClass( "active" );
});
};
})( jQuery );
Il plugin accetta come parametro il numero di righe da mostrare per ciascuna pagina.