温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

php和js怎么实现分页

发布时间:2023-05-08 10:21:35 阅读:128 作者:iii 栏目:编程语言
PHP开发者专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要介绍“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:1name:"张三"age:20address:"北京"},
            {id:2name:"李四"age:22address:"上海"},
            {id:3name:"王五"age:25address:"广州"},
            {id:4name:"赵六"age:28address:"深圳"},
            {id:5name:"周七"age:30address:"杭州"},
            {id:6name:"吴八"age:35address:"南京"},
            {id:7name:"钱九"age:40address:"西安"},
            {id:8name:"孙十"age:45address:"重庆"},
            {id:9name:"郑十一"age:50address:"成都"},
            {id:10name:"冯十二"age:55address:"武汉"}
        ];

        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>

关于“php和js怎么实现分页”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×