PHP: infinite scroll con jQuery

  • PHP
  • Gabriele Romanato

In PHP è semplice interagire con jQuery per implementare l'infinite scroll.

Possiamo implementare la seguente soluzione:


class Ajax {
    public function infiniteScroll(Database $db) {
       $total_posts = $db->select("SELECT count(*) AS total FROM posts");
       $per_page = 10;
       $pages = floor(intval($total_posts[0]['total'] ) / $per_page);
       $current_page = (isset($_GET['page']) && ctype_digit($_GET['page']) && intval($_GET['page']) <= $pages) ? intval($_GET['page']) : 1;
       $offset = $current_page * $per_page;
       $query = "SELECT * FROM posts ORDER BY published DESC LIMIT $per_page OFFSET $offset";
       $posts = $db->select($query);

       $this->json($posts);
    }
    private function json($data) {
        header('Content-Type: application/json');
        echo json_encode($data);
        exit;
    }
}

Si tratta di una classica paginazione di dati in PHP. L'unica differenza è che il client via AJAX invia un numero progressivo che indica la pagina corrente che si vuole visualizzare. In pratica si tratta di incrementare un contatore memorizzando il risultato dell'incremento:


var getPosts = function( value ) {

        value = parseInt( value, 10 ) || 1;

        var perPage = 10;
        var $posts = $( ".ajax-scroll .post" );
        var current = $posts.length;
        var page = value + 1; // Incremento 

        $.get( "/ajax/infiniteScroll", { page: page }, function( response ) {
            if( Array.isArray( response ) && response.length > 0 ) {
                var html = '';
                for( var i = 0; i < response.length; i++ ) {
                    var post = response[i];
                    // Si costruisce l'output HTML
                }
                // Salvataggio della pagina corrente ed output HTML
                $( ".ajax-scroll" ).data( "page", page ).append( html );
            }
        });
};

Si presuppone che i risultati vengano inseriti in un elemento contenitore con classe ajax-scroll. A questo punto il client collega la routine della funzione vista allo scrolling della pagina:


if( $( ".ajax-scroll" ).length && $( ".ajax-scroll .post" ).length ) {
    $( ".ajax-scroll" ).data( "page", 1 ); // Si parte da pagina 1, ossia dai post già presenti
    $( window ).scroll(function() {
        if( $( window ).scrollTop() + $( window ).height() >= $( document ).height() ) {
            getProducts( $( ".ajax-scroll" ).data( "page" ) );
        }
    });
}

Il metodo Ajax::infiniteScroll() è stato volutamente riproposto nell'URL della richiesta AJAX, in modo che se si utilizza il pattern MVC l'utilizzo è pressoché immediato.

Torna su