jQuery: paginazione delle tabelle cross-browser

Mesi fa avevo proposto una soluzione jQuery per la paginazione delle tabelle, ma come mi è stato fatto notare si trattava di una soluzione che non funzionava in Internet Explorer. Ecco quindi una paginazione delle tabelle in jQuery cross-browser.

Marcatura HTML

Per funzionare al meglio, la soluzione prevede che le tabelle abbiano l'elemento tbody esplicitamente impostato:

<table class="paginated">
	<thead>
		<!-- intestazioni -->
	</thead>
	<tbody>
		<!-- corpo della tabella -->
	</tbody>
</table>

Tecnicamente parlando, specificare questo elemento non è necessario a livello di struttura DOM, ma si tratta di una best practice da seguire per scrivere tabelle semantiche ed accessibili.

Codice CSS

Andremo solo a specificare gli stili per la navigazione delle pagine:

div.pager {
    text-align: center;
    margin: 1em 0;
}

div.pager span {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8;
    text-align: center;
    cursor: pointer;
    background: #000;
    color: #fff;
    margin-right: 0.5em;
}

div.pager span.active {
    background: #c00;
}
​

La classe active andrà ad evidenziare dinamicamente la pagina corrente.

Codice jQuery

Con jQuery dobbiamo utilizzare il metodo .slice() per raggruppare le righe di tabella utilizzando come valori il numero massimo di righe per pagina e il numero della pagina corrente. Quindi dobbiamo associare un evento a ciascun bottone della paginazione per mostrare la pagina corrispondente:

$('table.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = 10;
    var $table = $(this);
    $table.bind('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).bind('click', {
            newPage: page
        }, function(event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager).addClass('clickable');
    }
    $pager.insertBefore($table).find('span.page-number:first').addClass('active');
});

Associamo il numero di pagina ai bottoni utilizzando i custom data dell'evento associato al bottone. La tabella stessa, invece, ha un evento custom che genera di fatto la paginazione.

Potete visionare l'esempio finale in questa pagina.