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',
            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 = input('get.deletetime', null); // 获取deletetime参数

        $query = Db::name('sell');
        if ($deletetime === null) {
            $query->where('deletetime', 'null'); // 如果deletetime为字符串'null'，则查询deletetime为null的记录
        } else {
            $query->where('deletetime', 'not null'); // 如果deletetime不为字符串'null'，则查询deletetime不为null的记录
        }

        $select = $query->order('sell_id', 'desc')->page($page, $limit)->select(); // 按照sell_id降序排列并分页查询数据

        $total = Db::name('sell')->where('deletetime', $deletetime)->count(); // 统计符合条件的总记录数

        $result = [
            'code' => 0, // 返回代码为0表示成功
            'msg' => 'success', // 返回消息为'success'
            'data' => [
                'total' => $total, // 总记录数
                'list' => $select // 查询结果列表
            ]
        ];

        return json($result); // 返回JSON格式的结果
    }