Consiglio di implementare la paginazione lato server e non lato client poichè con una grande mole di dati il processo può essere intensivo - index.php?page=52

Ovviamente se abbiamo una tabella riordinabile, il sorting ed il paging vanno effettuati entrambi o lato server o lato client altrimenti si corre il rischio di creare confusione

Lato client

Selezioniamo dieci record da una tabella e nascondiamo gli altri

Javascript code:

$(document).ready(function() {
						   
  $('table.sortable').each(function() {
	
    var currentPage = 0;
    var numPerPage = 10;
    var $table = $(this);
	var numRows = $table.find('tbody tr').length;
	
    $table.find('tbody tr').show();
	$table.find('tbody tr:lt(' + (currentPage * numPerPage) + ')').hide();
    $table.find('tbody tr:gt(' + ((currentPage + 1) * numPerPage - 1) + ')').hide();


  });
});

Ecco la nostra tabella paging step 1

Ora dobbiamo costruire un pager ed inserirlo all'interno della nostra pagina:

Javascript code:

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">' + (page + 1) + '</span>').appendTo($pager).addClass('clickable');

}

$pager.insertBefore($table);

Ecco la nostra tabella paging step 2

A questo punto dobbiamo solamente fare in modo di cambiare il valore di currentPage ogni volta che premiamo sulla pagina desiderata e richiamare la funzione

Javascript code:

$(document).ready(function() {

    

  $('table.sortable').each(function() {

  

  	var currentPage = 0;

  	var numPerPage = 10;

  	var $table = $(this);

  	var numRows = $table.find('tbody tr').length;

  

  	var repaginate = function() {$table.find('tbody tr').show();

  		$table.find('tbody tr:lt(' + (currentPage * numPerPage) + ')').hide();

  		$table.find('tbody tr:gt(' + ((currentPage + 1) * numPerPage - 1) + ')').hide();

  	}

  		

 	 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">' + (page + 1) + '</span>')

  				.appendTo($pager).addClass('clickable')

  				.bind('click', {'newPage': page}, function(event) {

  					currentPage = event.data['newPage'];

  					repaginate();

  				})

  			}

  			$pager.insertBefore($table);

  			

 			repaginate();

		 });

  });

Parti importanti del codice:

• incapsulo la funzione per mostrare e nascondere le righe -

  var repaginate = function() {$table.find('tbody tr').show();
  	$table.find('tbody tr:lt(' + (currentPage * numPerPage) + ')').hide();
  	$table.find('tbody tr:gt(' + ((currentPage + 1) * numPerPage - 1) + ')').hide();
  	}

• Assegno ad ogni numero un gestore d'evento "click". Il metodo bind può ricevere come parametro un oggetto con coppia nome valore da memorizzare, disponibile al momento del click -

  .bind('click', {'newPage': page}, function(event) {
  			currentPage = event.data['newPage'];
  			repaginate();
  })

Ecco la nostra tabella paging step 3