Maison > Article > développement back-end > Comment implémenter la pagination en php et js

Comment implémenter la pagination en php et js

PHPzoriginal: 2023-05-06 19:40:08737parcourir

Avec l'évolution continue des applications web et l'augmentation du volume de données, la pagination est devenue un moyen technique nécessaire. La mise en œuvre de la pagination est principalement divisée en deux méthodes : côté serveur et côté client. Dans cet article, nous nous concentrerons sur la façon dont PHP et JS implémentent la pagination.

1. Pagination côté serveur

1. Principe de base

La pagination côté serveur repose sur les paramètres de limite et de décalage de l'instruction SQL. Généralement, nous obtenons d’abord le nombre total d’enregistrements, puis calculons le nombre total de pages. Ensuite, en fonction du numéro de page actuel et du nombre d'enregistrements affichés sur chaque page, les valeurs limites et de décalage de la page actuelle sont calculées et la plage d'enregistrements à obtenir est spécifiée dans l'instruction SQL. Enfin, les enregistrements obtenus sont renvoyés au navigateur pour affichage.

2.implémentation php

php en tant que langage côté serveur, vous pouvez utiliser une requête mysql pour obtenir des données. Voici un exemple d'extrait de code :

<?php
$host = 'localhost';
$username = 'root';
$password = 'password';
$database = 'test';

$conn = new mysqli($host, $username, $password, $database);

if($conn->connect_error){
    die("Connection failed: " . $conn->connect_error);
}

$per_page = 10; // 每页显示10条记录
$page = isset($_GET['page']) ? $_GET['page'] : 1; // 获取当前页码，默认为第1页
$start = ($page - 1) * $per_page; // 计算当前页的起始记录号

$sql = "SELECT * FROM users LIMIT $start, $per_page";

$result = $conn->query($sql);

if($result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        echo $row['id'] . " " . $row['name'] . "<br>";
    }
}

$conn->close();

echo "<br>";

// 分页导航
echo "<div class='pagination'>";
echo "<a href='?page=1'>第一页</a>";

if($page > 1){
    echo "<a href='?page=".($page-1)."'>上一页</a>";
}

if($page < $total_pages){
    echo "<a href='?page=".($page+1)."'>下一页</a>";
}

echo "<a href='?page=".$total_pages."'>最后一页</a>";
echo "</div>";

Le code ci-dessus implémente l'obtention d'informations utilisateur à partir de la base de données MySQL, affiche 10 enregistrements par page et prend en charge la fonction de pagination. Parmi eux, $per_page représente le nombre d'enregistrements affichés sur chaque page, $page représente le numéro de la page actuelle, $start représente le numéro d'enregistrement de départ de la page actuelle et $total_pages représente le nombre total de pages.

2. Pagination côté client

1 Principe de base

La pagination côté client fait référence à l'obtention de tous les enregistrements du serveur vers le navigateur à l'adresse suivante. une fois, puis utilisez js pour le traitement de la pagination. L'implémentation spécifique est la suivante :

1) Chargez toutes les sources de données dans js

2) Calculez le nombre total d'enregistrements et le nombre total de pages ; 🎜 #3) Calculez la plage de données qui doit être affichée sur la page actuelle en fonction du numéro de page actuelle et du nombre d'enregistrements affichés sur chaque page

4) Restituez les données et affichez-les sur ; la page ;

5 ) Basculez la pagination en cliquant sur le numéro de page.

2.js implémentation

js implémentation de la pagination est principalement basée sur les frameworks jQuery et Bootstrap. Voici un exemple de code pour la pagination basée sur Bootstrap :

<!DOCTYPE html>
<html>
<head>
    <title>客户端分页示例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h3>客户端分页示例</h3>
        <table class="table table-bordered table-hover" id="tblData">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody id="tblBody">
            </tbody>
        </table>
        <nav>
            <ul class="pagination" id="pagination">
            </ul>
        </nav>
    </div>
    <script>
    $(function(){
        // 模拟数据源
        var data = [
            {id:1, name:"张三", age:20, address:"北京"},
            {id:2, name:"李四", age:22, address:"上海"},
            {id:3, name:"王五", age:25, address:"广州"},
            {id:4, name:"赵六", age:28, address:"深圳"},
            {id:5, name:"周七", age:30, address:"杭州"},
            {id:6, name:"吴八", age:35, address:"南京"},
            {id:7, name:"钱九", age:40, address:"西安"},
            {id:8, name:"孙十", age:45, address:"重庆"},
            {id:9, name:"郑十一", age:50, address:"成都"},
            {id:10, name:"冯十二", age:55, address:"武汉"}
        ];

        var per_page = 5; // 每页显示5条记录
        var total = data.length; // 记录总数
        var total_pages = Math.ceil(total / per_page); // 计算总页数

        // 初始化页码
        for(var i = 1; i <= total_pages; i++){
            var li = "<li><a href='#' onclick='changePage(" + i + ")'>" + i + "</a></li>";
            $("#pagination").append(li);
        }

        // 默认显示第一页
        showData(1);

        // 根据页码显示数据
        function showData(page){
            var start = (page - 1) * per_page;
            var end = start + per_page;
            var html = "";
            for(var i = start; i < end; i++){
                var item = data[i];
                if(item){
                    html += "<tr><td>" + item.id + "</td><td>" + item.name + "</td><td>" + item.age + "</td><td>" + item.address + "</td></tr>";
                }
            }
            $("#tblBody").html(html);
        }

        // 切换页码
        window.changePage = function(page){
            showData(page);
            $("#pagination li").removeClass("active");
            $("#pagination li:nth-child(" + (page+1) + ")").addClass("active");
        }
    });
    </script>
</body>
</html>

Le code ci-dessus démontre l'utilisation du framework Bootstrap pour implémenter la pagination côté client et utilise des sources de données simulées pour l'affichage.

Conclusion

La pagination côté serveur et la pagination côté client ont leurs propres avantages et inconvénients. Pour les ensembles de données à petite échelle, la pagination côté client peut être utilisée pour réduire la charge sur le serveur. Pour les ensembles de données à grande échelle, la pagination côté serveur est plus adaptée. Par conséquent, il est nécessaire de choisir la méthode de radiomessagerie appropriée en fonction de la situation réelle.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Logiciel de modification professionnel PHPArticle suivant：Logiciel de modification professionnel PHP

Articles Liés

Voir plus