Bagaimana untuk melaksanakan paging dalam php dan js-masalah PHP-php.cn

Bagaimana untuk melaksanakan paging dalam php dan js

PHPz

Lepaskan： 2023-05-06 19:40:08

asal

845 orang telah melayarinya

Dengan evolusi aplikasi web yang berterusan dan peningkatan jumlah data, paging telah menjadi cara teknikal yang diperlukan. Pelaksanaan paging terbahagi kepada dua kaedah: sisi pelayan dan sisi klien. Dalam artikel ini, kami akan memberi tumpuan kepada cara php dan js melaksanakan paging.

1. Paging sebelah pelayan

1. Prinsip asas

Paging sebelah pelayan bergantung pada tetapan had dan offset pernyataan SQL. Secara amnya, kita mula-mula mendapat jumlah bilangan rekod dan kemudian mengira jumlah halaman. Kemudian, berdasarkan nombor halaman semasa dan bilangan rekod yang dipaparkan pada setiap halaman, had dan nilai mengimbangi halaman semasa dikira, dan julat rekod yang akan diperolehi dinyatakan dalam pernyataan SQL. Akhirnya, rekod yang diperoleh dikembalikan ke pelayar untuk paparan.

Pelaksanaan 2.php

php ialah bahasa sebelah pelayan yang boleh menggunakan pertanyaan mysql untuk mendapatkan data. Berikut ialah contoh coretan kod:

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

Salin selepas log masuk

Kod di atas melaksanakan mendapatkan maklumat pengguna daripada pangkalan data mysql, memaparkan 10 rekod setiap halaman dan menyokong fungsi halaman. Antaranya, $per_page mewakili bilangan rekod yang dipaparkan pada setiap halaman, $page mewakili nombor halaman semasa, $start mewakili nombor rekod permulaan halaman semasa dan $total_pages mewakili jumlah halaman.

2. Paging sebelah pelanggan

1 Prinsip asas

Paging sebelah klien bermaksud untuk mendapatkan semua rekod dari pelayan ke penyemak imbas pada satu masa, dan kemudian gunakan js untuk urusan paging. Kaedah pelaksanaan khusus adalah seperti berikut:

1) Muatkan semua sumber data ke dalam js

2) Kira jumlah rekod dan jumlah halaman; ke nombor halaman semasa dan bilangan rekod yang dipaparkan pada setiap halaman, untuk mengira julat data yang perlu dipaparkan pada halaman semasa; >

5) Tukar paging dengan mengklik pada nombor halaman.

Pelaksanaan 2.js

pelaksanaan js kelui terutamanya berdasarkan rangka kerja jQuery dan Bootstrap. Berikut ialah contoh kod untuk paging berdasarkan 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>

Salin selepas log masuk

Kod di atas menunjukkan penggunaan rangka kerja Bootstrap untuk melaksanakan paging sisi klien dan menggunakan sumber data simulasi untuk paparan.

Kesimpulan

Kedua-dua halaman muka surat pelayan dan muka surat pelanggan mempunyai kelebihan dan kekurangan mereka sendiri. Untuk set data berskala kecil, paging sisi klien boleh digunakan untuk mengurangkan beban pada pelayan. Untuk set data berskala besar, paging sebelah pelayan adalah lebih sesuai. Oleh itu, perlu memilih kaedah paging yang sesuai mengikut situasi sebenar.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan paging dalam php dan js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!