layui与ThinkPHP5.0数据渲染分页

HTML部分要引入自己存放layui.js和layui.css的文件路径这里就不说了，下面是HTML部分放入body下即可

<table class="layui-hide" id="demo" lay-filter="demo"></table>
<script id="toolbarDemo" type="text/html">
    <div class="demoTable layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script id="barDemo" type="text/html">
    <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>

这里是js部分可直接写在HTML文件里，cols里的内容需改成自己的
 

layui.use('table', function () {
        var table = layui.table;

        var defaultFunction = function () {
            table.render({
                elem: '#demo',
                url: '/index/sell/SellAllQuery?deletetime=null',//这里我用的get方法传参到后端
                limit: 10,
                limits: [10, 20, 30, 50],
                page: true,
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                parseData: function (res) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.data.total,
                        "data": res.data.list
                    };
                },
                cols: [//这里是需要渲染的部分，也就是整个表格
                    [
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'sell_id', title: 'ID', width: 80, sort: true, fixed: true,unresize:true},
                        {field: 'sell_number', title: '订单编号', width: 120,unresize:true},
                        {field: 'sell_name', title: '联系人', width: 100,unresize:true},
                        {field: 'sell_phone', title: '联系电话', width: 120,unresize:true},
                        {field: 'customer_type', title: '客户类型', width: 100,unresize:true, templet: function(d){
                                // 定义客户类型的枚举值和对应的备注值映射关系
                                var customerTypeMap = {
                                    '1': '企业单位',
                                    '2': '个人'
                                };

                                // 返回客户类型的备注值
                                return customerTypeMap[d.customer_type] || '';
                            }},
                        {field: 'public_institutions', title: '企业名称', width: 160,unresize:true},
                        {field: 'delivery_address', title: '送货地址', width: 160,unresize:true},
                        {field: 'sell_inventory', title: '销售清单', width: 160,unresize:true},
                        {field: 'total_price', title: '金额', width: 80,unresize:true},
                        {field: 'payment', title: '支付方式', width: 100,unresize:true, templet: function(d){
                                var paymentMap = {
                                    '1': '欠款',
                                    '2': '现金',
                                    '3': '支付宝',
                                    '4': '微信'
                                };
                                return paymentMap[d.payment] || '';
                            }},
                        {field: 'createtime', title: '创建时间', width: 120,unresize:true},
                        {field: 'updatetime', title: '完成时间', width: 120,unresize:true},
                        {field: 'csell_descr', title: '备注', width: 120,unresize:true},
                        {field: 'operator', title: '操作人', width: 100, fixed: 'right',unresize:true},
                        {field: 'lodpo', title: '打印状态', width: 100, fixed: 'right',unresize:true, templet: function(d){
                                var lodpoMap = {
                                    '1': '未打印',
                                    '2': '已打印'
                                };
                                return lodpoMap[d.lodpo] || '';
                        {field: 'status', title: '订单状态', width: 100, fixed: 'right',unresize:true, templet: function(d){
                                var statusMap = {
                                    '1': '未完成',
                                    '2': '已完成'
                                };
                                return statusMap[d.status] || '';
                            }},
                        {fixed: 'right', title: '操作', width: 178, align: 'center',unresize:true, toolbar: '#barDemo'}
                    ]
                ]
            });
        };

下面是ThinkPHP类方法的部分

public function SellAllQuery()
    {
        $page = input('get.page', 1); // 当前页码
        $limit = input('get.limit', 10); // 每页显示数量
        $deletetime = $_GET['deletetime'];//因为这里需要筛选出数据库中deletetime字段为空或者有值的数据，有值的数据为回收站数据
        // 查询 sell 表，并按 sell_id 降序排列，获取当前页的数据
        $select = Db::name('sell')->where('deletetime', $deletetime)->order('sell_id', 'desc')->page($page, $limit)->select();

        // 统计 sell 表中的总记录数
        $total = count($select);

        // 构建返回的 JSON 数据
        $result = [
            'code' => 0,
            'msg' => 'success',
            'data' => [
                'total' => $total,
                'list' => $select
            ]];
        // 返回 JSON 数据
        return json($result);

    }