php与js怎么实现分页

发布时间：2023-10-12 13:02:51 所属栏目：PHP教程来源：网络

导读： 　　这篇文章主要介绍“php和js怎么实现分页”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“php和js怎么实现分页”文章能

　　这篇文章主要介绍“php和js怎么实现分页”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“php和js怎么实现分页”文章能帮助大家解决问题。

　　一、服务器端分页

　　1.基本原理

　　服务器端分页依赖于SQL语句的limit和offset设置。一般情况下，我们首先要获取总记录数，然后计算出总页数。然后，根据当前页码和每页显示记录数，计算出当前页的limit和offset值，从而在SQL语句中指定需要获取的记录范围。最后，将获取的记录返回给浏览器进行展示。

　　2.php实现

　　php作为一种服务器端语言，可以使用mysql查询获取数据。下面是一个示例代码片段：

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

　　以上代码实现了从mysql数据库中获取用户信息，每页显示10条记录，支持分页功能。其中，$per_page表示每页显示的记录数，$page表示当前页码，$start表示当前页的起始记录号，$total_pages表示总页数。

　　二、客户端分页

　　1.基本原理

　　客户端分页是指将所有记录一次性从服务器获取到浏览器端，然后使用js进行分页处理。具体实现方式如下：

　　1）将所有数据源加载到js中；

　　2）计算总记录数和总页数；

　　3）根据当前页码和每页显示记录数，计算出当前页需要显示的数据范围；

　　4）渲染数据并显示在页面上；

　　5）通过点击页码切换分页。

　　2.js实现

　　js实现分页主要是基于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(){

　　        // 模拟数据源

　　        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>

（编辑：南京站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!