Layui实现分页展示

时间：2021-08-06 12:07:03 收藏：0 阅读：17

1.前端页面：
先引入必要的layui.js和css文件。可去官网下载：https://www.layui.com/。

这里建议引入本地文件

技术分享图片

1.前端代码

<!DOCTYPE html>
<html>
<head>
    <!--素人郭-->
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>

<table class="layui-hide" id="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>
    layui.use(‘table‘, function(){
        var table = layui.table;

        table.render({
            elem: ‘#test‘
            ,url:"{:url(‘/show‘)}"
            ,cols: [[
                {field:‘id‘, width:80, title: ‘ID‘, sort: true}
                ,{field:‘goods_name‘, width:200, title: ‘商品名‘}
                ,{field:‘goods_price‘, width:200, title: ‘商品单价‘, sort: true}
                ,{field:‘spec_value_names‘, width:200, title: ‘商品介绍‘}
                ,{field:‘create_time‘, title: ‘添加时间‘, minWidth: 150}
                ,{fixed: ‘right‘, width:178, align:‘center‘, title: ‘操作‘, toolbar: ‘#barDemo‘}
            ]]
            ,page: true
            ,limit:5
        });
    });
</script>

</body>
</html>

2.后台


在tp5 Controller层需要通过Mode实例化对象连接数据库查询表中的数据

public function show(){
    if (request()->isAjax()){
        //接收前台 limit 传过来的参数
        $page = input(‘limit‘);
        //调用模型层
        $data = \app\admin\model\Show::getShow($page);
        //查询出总条数
        $sum = $data->total();
        //转为二维数组
        $data = $data->getCollection()->toArray();
        //返回json格式 切记 code=0
        $json = [
            ‘code‘=>0,
            ‘msg‘=>"",
            ‘data‘=>$data,
            ‘count‘=>$sum
        ];
        return $json;
    }
    return view(‘login/show‘);
}

3.模型层

protected $table = ‘pyg_order_goods‘;
public static function getShow($page){
    return self::order(‘id desc‘)->paginate($page);
}

原文：https://www.cnblogs.com/guobusong/p/15107553.html