前端后台框架Layui学习笔记 - 数据表格分页处理

• 简介
• 温馨提示
• • 分页实现思路
  • 开发环境
  • 实现思路
  • 代码实例
  • layui User
• 温馨提示
• 结束语

在做SpringBoot项目时，前端后台页面用到了Layui框架的数据table做数据渲染，在分页途中遇到点小问题，今天我们来讲讲具体简单实现方法。

Layui需要的json数据格式一般以 {code: value,count: value,data: object}

SpringBoot & Mybatis-Plus & IDEA & MySQL

定义Mapper映射分页方法，Service服务层实现分页方法 Spring Boot Controller 定义一个接口，进行数据分页处理。

UserMapper.java

//User实体类mapper映射
public interface UserMapper extends baseMapper {


    
    @Select("select * from r_users")
    IPage selectPages(Pages page);
}

UserService.java

    
    IPage selectPageList(Pages page);

UserController.java

    
    @RequestMapping("/pages")
    private ApiResult selectPages(@RequestParam("page") int page, @RequestParam("limit") int limit){

        IPage iPage = userService.selectPageList(new Pages(page,limit));
        ApiResult apiResult = new ApiResult(ApiResult.ON_SUCCESS,ApiResult.SUCCESS_MESSAGE,null);
        apiResult.setData(iPage.getRecords());
        apiResult.setCount(userService.queryList().size());
        return apiResult;
    }
    

 table.render({
            elem: '#currentTableId',
            url: '/user/pages',
            method: "get",
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            parseData: function (res) {
                console.log(res);
                return {
                    "code": 0, //解析接口状态
                    "msg": '成功', //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
                return res;
            },
            layout: ['prev', 'page', 'next', 'skip'], //这里就是一些功能按钮 详情可以阅读 layui的官方文档
            id: "table_test",
            page: true,
            limit: 5,
            limits: [5,10,20,30,50],
            //一步请求结果
            done: function(res, curr, count){

            },
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'uid', width: 120, title: 'ID', sort: true},
                {field: 'name', width: 120, title: '用户名'},
                {field: 'password', width: 120, title: '密码', sort: true},
                {field: 'phone', title: '手机号', width: 120},
                {field: 'loginDate', title: '登录时间', width: 170},
                {field: 'registerDate', title: '注册时间', width: 170},
                {title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center"}
            ]],
            skin: 'row'
        });

根据后台设置的分页接口，进行数据渲染。
最最最重要的一点，在设计接口时，注意一下layui的url属性
接口地址。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 自定义） page 代表当前页码、limit 代表每页数据量

layui后台效果

Q:为什么我的分页控件不显示？
答：不显示分页控件时候请检查异步请求的ajax的JSON数据是否带有count 或大于0.

Q： 关于我的数据长度不和当前所有长度数值一致？
答：通过parseData下count进行参数赋值。

关于layui的分页就讲到这里，笔者在搜索相关资料时候发现部分参考资料比较杂，笔者给大家整合了一遍，如果有问题或者建议欢迎指出。