Pagination avec jQuery, Ajax et PHP

Cet article montre comment implémenter facilement la pagination pour vos ensembles de données à l'aide de PHP, AJAX et JQuery, en tirant parti de la simplicité du framework Silex.

Avantages clés:

• La combinaison de PHP, Ajax et JQuery offre une approche simple de la pagination. Il implique la configuration de la base de données, l'interaction de la base de données PHP et JQuery pour les mises à jour dynamiques.
• AJAX améliore l'expérience utilisateur en mettant uniquement les sections de page nécessaires sans rechargement de page complète, en améliorant la vitesse et en réduisant la déformation du serveur.
• Cette méthode est particulièrement bénéfique pour les grands ensembles de données où le chargement de toutes les données pourrait avoir un impact négatif sur les performances.
• Les considérations SEO sont cruciales. Des techniques comme l'amélioration progressive et pushState s'assurer que les moteurs de recherche peuvent indexer correctement le contenu chargé dynamiquement.

Source de données:

Nous utiliserons une base de données MySQL (facilement adaptable à d'autres SGBDR) nommées example avec un tableau appelé people. Pour cet exemple:

id nom Âge

1 jamie 43 2 Joe 24 3 Fred 23 4 Clive 92 5 roy 73 6 geoff 24 7 ray 12 8 John 9 9 pete 32 10 ralph 34

backend (php avec silex):

Installez Silex à l'aide du compositeur: composer require silex/silex

index.php: Établissez la connexion de la base de données à l'aide de l'APD (recommandé pour la sécurité et la portabilité):

$app['db'] = function () {
    $host = 'localhost';
    $db_name = 'example';
    $user = 'root';
    $pass = '';

    return new \PDO(
        "mysql:host={$host};dbname={$db_name}",
        $user,
        $pass,
        array(\PDO::ATTR_EMULATE_PREPARES => false)
    );
};

Définir trois itinéraires:

1. Retrievale de données: Reprend un sous-ensemble de données basé sur le numéro de page et les lignes par page.

$app->get('/data/page/{page_num}/{rows_per_page}', function ($page_num, $rows_per_page) use ($app) {
    $start = ((int)$page_num - 1) * (int)$rows_per_page;
    $total_rows = (int)$rows_per_page;

    $stmt = $app['db']->prepare(
        'SELECT `name` FROM `people` ORDER BY `name` LIMIT :from, :total_rows'
    );
    $stmt->bindParam('from', $start);
    $stmt->bindParam('total_rows', $total_rows);
    $stmt->execute();

    $result = $stmt->fetchAll(\PDO::FETCH_ASSOC);
    return $app->json($result);
});

2. Compte de lignes: récupère le nombre total de lignes.

$app->get('/data/countrows', function () use ($app) {
    $stmt = $app['db']->query('SELECT COUNT(`id`) AS `total_rows` FROM `people`');
    $result = $stmt->fetch(\PDO::FETCH_ASSOC);
    return $app->json($result);
});

3. Frontend: sert la page HTML.

$app->get('/', function () use ($app) {
    return file_get_contents(__DIR__.'/../resources/views/index.html');
});

frontend (html & jQuery):

Inclure jQuery et créer des conteneurs pour les liens de pagination et les données:

<ul id="rows"></ul>
<ul id="page-numbers"></ul>
<🎜>

Fonctions JavaScript:

var rows_per_page = 3;
var total_rows;

function initPageNumbers() {
    $.get('data/countrows', function(data){
        total_rows = parseInt(data.total_rows);
        var count = 1;
        for(var x = 0; x < Math.ceil(total_rows / rows_per_page); x++) {
            $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bpage-numbers').append('<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b'+count+'" onclick="getPage('+count+');">'+count+'</a></li>');
            count++;
        }
    });
}

function getPage(page_num) {
    $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15brows').html('');
    $.get('data/page/'+page_num+'/'+rows_per_page, function(data){
        $(data).each(function(){
            $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15brows').append('<li>'+this.name+'</li>');
        });
    });
}

$(document).ready(function(){
    initPageNumbers();
    var page_num = 1;
    if(window.location.hash !== '') {
        var hash_num = parseInt(window.location.hash.substring(1));
        if(hash_num > 0) {
            page_num = hash_num;
        }
    }
    getPage(page_num);
});

Considérations:

• Pour les ensembles de données très grands, considérons les techniques d'optimisation de la base de données plus avancées.
• Implémentez la gestion robuste des erreurs dans le frontend et le backend.
• Explorez la pagination côté serveur pour des ensembles de données extrêmement grands afin de minimiser la charge de base de données.

Cette réponse améliorée fournit une explication plus complète et structurée, abordant les aspects clés du processus de pagination. N'oubliez pas de remplacer les informations d'identification de la base de données d'espace réservé par vos valeurs réelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!