layui数据表格分页失败

最新推荐文章于 2025-04-28 10:49:08 发布

电脑令人发狂的

最新推荐文章于 2025-04-28 10:49:08 发布

阅读量4k

点赞数 11

本文链接：https://blog.youkuaiyun.com/qq_40306697/article/details/106297317

版权

主要错误是表格直接在第一页上就把所有数据显示了,分页不起作用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="http://localhost:8001/layui/css/layui.css">
    <script src="http://localhost:8001/layui/layui.js"></script>
</head>
<body>

<table id="demo" lay-filter="test"></table>


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

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 465
            , url: '/list' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'username', title: '用户名', sort: true, width: 100, fixed: 'left'}
                , {field: 'name', title: '姓名', width: 100}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                , {field: 'birthday', title: '出生日期', width: 120}
                , {field: 'email', title: '邮箱', width: 177}
            ]]
            ,limits: [3,5,10,20]
            , limit: 10
            , parseData: function (res) {
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {"code": res.code, "msg": res.msg, "count": res.count, "data": result};
            }
        });
    });
</script>
</body>
</html>