使用LayUI分页器配合PHP+Mysql创建内容分页

关注

原创最新推荐文章于 2026-07-01 11:50:25 发布 3.3k 阅读 AI 写同款· GEO 优化 ›

php+layui实战，做一个轻社区本来业务需要搭建一个轻社区，本着这个方向做了些低成本实现的调研，最终选择了layui作为前端模板，这样一个后端研发同学就可以轻松搞定了。顺便实现了个练手站。阅读详情

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div style="width: 960px;margin:0 auto;text-align: center">
    <div style="border: 1px solid #000;height:800px;" id="cent">
        <div>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div id="test1"></div>
</div>

<script src="layui/layui.all.js"></script>
<script>

    var  pageWhole= 0
    $.ajax({
        url: "whole.php",
        async:false,
        type:"post",
        success: function(sp){
            pageWhole = sp; //取到数据总条数
        }
    });


    layui.use('laypage', function(){

        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: pageWhole //数据总数，从服务端得到
            ,limit:10   //每页显示的条数
            ,jump: function(obj){

                $.ajax({
                    url: "paging.php",
                    type:"post",
                    data:{tex:50,pageNumber:obj.curr},
                    success: function(sp){
                        jsp =  eval('(' + sp + ')');    //把字符串转换为json

                        var i = 0;
                        var ct = "";
                        while(i<jsp.length){
                            ct+="<div>"+"<span>"+jsp[i].id+"</span>"+"<span>"+jsp[i].text+"</span>"+"<span>"+jsp[i].age+"</span>"+"</div>" ;
                            i++;
                        }
                        $("#cent").html(ct);
                    }
                });

            }
        });
    });
</script>
</body>
</html>

获取数据

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018/9/4
 * Time: 15:23
 */

    header("content-type:text/html;charset=utf-8;");

    //1.建立连接;
    //    $conn= mysql_connect("localhost","root","199707142510dyf");
    $conn= mysql_connect("localhost","root","199707142510dyf");
    //2.选择数据库
    $ku = mysql_select_db ("mytable",$conn);

    //3.设置客户端和连接字符集;
    mysql_query("set names utf8");



    $pageN = $_POST["pageNumber"]*10;

    //4.通过PHP进行insert操作
    $sql = "select * from mydata order by id desc limit {$pageN},10";
    $result = mysql_query($sql);
    //获取总字段数
    $jsons = "[";
    while($rows = mysql_fetch_row($result)){
        $jsons.="{"."'id':'"."{$rows[0]}"."','text':'"."{$rows[1]}"."','age':'"."{$rows[2]}". "'},";
    }

    $jsons = substr($jsons, 0, -1); //将字符串最后一个 逗号 , 删除
    $jsons.="]";

    echo $jsons;

    //释放结果集
    mysql_free_result($result);


    //6.关闭数据库资源
    mysql_close($conn);
?>

获取数据总条目数量

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018/9/4
 * Time: 15:23
 */

header("content-type:text/html;charset=utf-8;");

//1.建立连接;
//    $conn= mysql_connect("localhost","root","199707142510dyf");
$conn= mysql_connect("localhost","root","199707142510dyf");
//2.选择数据库
$ku = mysql_select_db ("mytable",$conn);

//3.设置客户端和连接字符集;
mysql_query("set names utf8");
//    获取到总页数
$ZongPage = mysql_query("select count(*) from mydata");
$sum = mysql_fetch_row($ZongPage);
$pageC = ceil($sum[0]/1);   //总条数
//$pageCount = ceil($sum[0]/10);   //总页数
echo $pageC;
//echo $pageCount;


//6.关闭数据库资源
mysql_close($conn);
?>

收录于