jQuery: paginazione AJAX con PHP

La paginazione AJAX è costituita da due componenti: uno script lato server che elabora la richiesta AJAX per ogni link ed il codice lato client che invia la richiesta. In questo tutorial useremo PHP per la parte lato server e jQuery per inviare le richieste AJAX. Questa scelta è irrilevante per i nostri scopi: la cosa importante è capire come funziona la paginazione.

Come funziona la paginazione

In SQL un'istruzione LIMIT può specificare due cose:

1. Con un solo parametro specifica il numero di risultati da restituire.
2. Con due parametri, separati da una virgola, specifica l'indice del risultato da cui partire ed il numero di risultati da restituire.

Consideriamo le seguenti due query:

SELECT * FROM posts ORDER BY id DESC LIMIT 3;
SELECT * FROM posts ORDER BY id DESC LIMIT 3,3;

La prima query seleziona i primi tre post dal database, mentre la seconda sposta l'indice (che parte sempre da 0) di 3 posizioni in avanti e specifica il numero totale di post, che in questo caso è 3.

Così la sequenza sarà:

1. 0, 1, 2
2. 3, 4, 5

La paginazione usa il secondo tipo di query. L'indice (offset) viene calcolato di volta in volta moltiplicando il numero della pagina al numero dei risultati per pagina e sottraendo al prodotto il numero di risultati per pagina.

offset = ( pageNumber * resultsPerPage ) - resultsPerPage

Così a pagina 2 l'indice di partenza sarà 3 ( ( 2 * 3 ) - 3 ). A pagina 3 l'indice sarà 6 ( ( 3 * 3 ) - 3 ) e così via.

Usare PHP per l'elaborazione delle richieste AJAX

PHP elabora le richieste GET inviate da jQuery in questo modo:

1. Valida il parametro GET contenente il numero di pagina.
2. Calcola l'indice iniziale.
3. Esegue la query SQL.
4. Restituisce l'output come stringa HTML.

Il primo passo è la validazione dei dati:

$start = 0;
$end = 3; // Numero di risultati per pagina
$value = 0; // Indice da calcolare


if( isset( $_GET[ 's'] ) ) {

	$taintedStart = $_GET[ 's' ];
	
	// Usiamo 2 solo come esempio

	if( strlen( $taintedStart ) <= 2 ) {
	
	    // Prima conversione

		$s = intval( $taintedStart );
	

        // Abbiamo un intero valido?
        
		if( filter_var( $s, FILTER_VALIDATE_INT ) ) {

			if( $s > $start ) { // Maggiore di 0?
				$start = $s;
			}

		

		}


	}

}

Quindi calcoliamo l'indice iniziale:

$value = ( $start * $end ) - $end;

Infine eseguiamo la query SQL e restituiamo la stringa HTML:

$db = new DB( 'host', 'username', 'password', 'database' );
$posts = $db->getResults( "SELECT * FROM posts WHERE post_type = 'post' AND post_status = 'publish' ORDER BY id DESC LIMIT $value,$end" );


$html = '';

foreach( $posts as $post => $content ) {
	$postContent = $content['post_excerpt'];
	$postTitle = $content['post_title'];
	$date = strtotime( $content['post_date'] );
	$postDate = strftime( '%d-%m-%Y', $date );

	$html .= sprintf( '<h3>%s</h3><small>%s</small><p>%s</p>', $postTitle, $postDate, $postContent );
}

echo $html;

Usare jQuery per inviare richieste AJAX

Il codice jQuery è molto più semplice di quello PHP:

(function( $ ) {
	$(function() {
		$( "a", "#pagination" ).on( "click", function( e ) {
			e.preventDefault();
			var $a = $( this );

			$a.addClass( "current" ).
			siblings().
			removeClass( "current" );

			var page = $a.data( "page" );
			$.get( "ajax.php", { s: page }, function( html ) {
				$( "#content" ).html( html );

			});
		});

	});

})( jQuery );

Usiamo il numero memorizzato in un attributo di dati come il numero di pagina da usare come parametro per la richiesta GET. Allo stesso tempo evidenziamo il link corrente con una specifica classe CSS.

Demo

Il seguente video mostra la paginazione AJAX in azione.

Codice

Potete trovare il codice usato per questo tutorial su GitHub.