php和js怎么實現(xiàn)分頁

發(fā)布時間：2023-05-08 10:21:35 來源：億速云閱讀：111 作者：iii 欄目：編程語言

這篇文章主要介紹“php和js怎么實現(xiàn)分頁”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強(qiáng)，希望這篇“php和js怎么實現(xiàn)分頁”文章能幫助大家解決問題。

1.基本原理

服務(wù)器端分頁依賴于SQL語句的limit和offset設(shè)置。一般情況下，我們首先要獲取總記錄數(shù)，然后計算出總頁數(shù)。然后，根據(jù)當(dāng)前頁碼和每頁顯示記錄數(shù)，計算出當(dāng)前頁的limit和offset值，從而在SQL語句中指定需要獲取的記錄范圍。最后，將獲取的記錄返回給瀏覽器進(jìn)行展示。

2.php實現(xiàn)

php作為一種服務(wù)器端語言，可以使用mysql查詢獲取數(shù)據(jù)。下面是一個示例代碼片段：

<?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; // 獲取當(dāng)前頁碼，默認(rèn)為第1頁
$start = ($page - 1) * $per_page; // 計算當(dāng)前頁的起始記錄號

$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>";

// 分頁導(dǎo)航
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>";

以上代碼實現(xiàn)了從mysql數(shù)據(jù)庫中獲取用戶信息，每頁顯示10條記錄，支持分頁功能。其中，$per_page表示每頁顯示的記錄數(shù)，$page表示當(dāng)前頁碼，$start表示當(dāng)前頁的起始記錄號，$total_pages表示總頁數(shù)。

二、客戶端分頁

1.基本原理

客戶端分頁是指將所有記錄一次性從服務(wù)器獲取到瀏覽器端，然后使用js進(jìn)行分頁處理。具體實現(xiàn)方式如下：

1）將所有數(shù)據(jù)源加載到j(luò)s中；

2）計算總記錄數(shù)和總頁數(shù)；

3）根據(jù)當(dāng)前頁碼和每頁顯示記錄數(shù)，計算出當(dāng)前頁需要顯示的數(shù)據(jù)范圍；

4）渲染數(shù)據(jù)并顯示在頁面上；

5）通過點擊頁碼切換分頁。

2.js實現(xiàn)

js實現(xiàn)分頁主要是基于jQuery和Bootstrap框架。下面是一個基于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">
        <h4>客戶端分頁示例</h4>
        <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(){
        // 模擬數(shù)據(jù)源
        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; // 記錄總數(shù)
        var total_pages = Math.ceil(total / per_page); // 計算總頁數(shù)

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

        // 默認(rèn)顯示第一頁
        showData(1);

        // 根據(jù)頁碼顯示數(shù)據(jù)
        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>

關(guān)于“php和js怎么實現(xiàn)分頁”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細(xì)節(jié)

php和js怎么實現(xiàn)分頁

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽