layi分页总结

分为两种模式：

一、是后台查询全部数据，前台分割

二、是后台分割，返回前台

方案一

    @GetMapping("blogs")
    public RespBean blogs(){
        List<Blog> list = blogService.list();
        return RespBean.success(list);
    }

　　返回类型

 

 

 前端：

table.render({
    elem: '#currentTableId',
    url: '/blogpage',
    cols: [
        [
        {field: 'id', width: 150, title: 'ID', sort: true},
        {field: 'title', width: 350, title: '标题', sort: true, totalRow: true},
        {field: 'type', width: 200, title: '类型', sort: true, totalRow: true},
        {field: 'date', width: 200, title: '发布时间', sort: true, totalRow: true},
        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
        ]
    ]
    , page: true
    , limits: [10, 20, 30]  //一页选择显示5,10,30条数据
    , limit: 10  //一页显示10条数据
    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
        console.log(this.limit);
        console.log(this.page.curr);
        console.log("长度："+res.data.length);
        console.log(res.code);

        var result;
        if(this.page.curr){
            result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
            console.log("true");
        }
        else{
            console.log("false");
            result=res.data.slice(0,this.limit);
        }

        return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.count, //解析数据长度
            "data":result

//解析数据列表
        };
    }, skin: 'line'
});

方案二

    @GetMapping("blogpage")
    public RespTable blogpage(@RequestParam(value = "page", defaultValue = "0") int page, @RequestParam(value = "limit", defaultValue = "10") int limit) {
        Page<Blog> blogPage=blogService.getBlogList(page, limit);//根据请求参数，获取切分数据
        int count = blogService.count();
        return RespTable.success(count,blogPage.getRecords());
    }

　　前端

        table.render({
            elem: '#currentTableId',
            url: '/blogpage',
            cols: [
                [
                {field: 'id', width: 150, title: 'ID', sort: true},
                {field: 'title', width: 350, title: '标题', sort: true, totalRow: true},
                {field: 'type', width: 200, title: '类型', sort: true, totalRow: true},
                {field: 'date', width: 200, title: '发布时间', sort: true, totalRow: true},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
                ]
            ]
            , page: true
            , limits: [10, 20, 30]  //一页选择显示5,10,30条数据
            , limit: 10  //一页显示10条数据
            , skin: 'line'
        });