springboot整合layui实现数据表格的分页操作

 <link rel="stylesheet" href="./layui/css/layui.css">

    
 <script src="./layui/layui.js"></script>
    
 <script src="./js/jquery2.1.4.js"></script>

 <!--表单信息（搜索条件）-->

    
 <div class="layui-form">
    
     <!--这两个隐藏的输入框用来存放当前页码值，以及页面显示数据的最大行数-->
    
     <input type="hidden" name="pageNum" id="pageNum">
    
     <input type="hidden" name="pageSize" id="pageSize">
    
     <div class="layui-form-item">
    
     <div class="layui-inline">
    
         <label class="layui-form-label">ID</label>
    
         <div class="layui-input-block">
    
             <input type="text" name="id" placeholder="请输入"
    
                    autocomplete="off" class="layui-input">
    
         </div>
    
     </div>
    
     <div class="layui-inline">
    
         <label class="layui-form-label">昵称</label>
    
         <div class="layui-input-block">
    
             <input type="text" name="nikiName"
    
                    placeholder="请输入" autocomplete="off" class="layui-input">
    
         </div>
    
     </div>
    
     <div class="layui-inline">
    
         <label class="layui-form-label">手机号</label>
    
         <div class="layui-input-block">
    
             <input type="text" name="phone" placeholder="请输入"
    
                    autocomplete="off" class="layui-input">
    
         </div>
    
     </div>
    
     <div class="layui-inline">
    
         <button id="getUser" class="layui-btn" lay-submit lay-filter="LAY-user-front-search">
    
             <i class="layui-icon layui-icon-search"></i>
    
         </button>
    
     </div>
    
     </div>
    
 </div>
    
 <script type="text/html" id="table-opreation">
    
     <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
    
         class="layui-icon layui-icon-edit"></i>编辑</a>
    
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
    
         class="layui-icon layui-icon-delete"></i>删除</a>
    
 </script>
    
 <!--数据表格位置-->
    
 <table id="data-table" lay-filter="data-table"></table>
    
 <!--分页位置-->
    
 <div id="data-page" class="layui-table-page"></div>

 <script>

    
     layui.use(['form','table','laypage'],function () {
    
     var form = layui.form
    
         ,table = layui.table
    
         ,laypage = layui.laypage;
    
     })
    
 </script>

 //limits是渲染分页工具栏时用到的参数，表示每页可以显示的最大条数，填写这个参数后，就会出现选择

    
 //每页最大显示条数的下拉选择框
    
 var limits = [15, 20, 25, 30]
    
 table.render({
    
         elem: "#data-table",//被渲染表格的id，因为用到的是id选择器，所以要添加#号
    
         url: "/user/list",//请求地址
    
         cols: [[{type: "checkbox", fixed: "left"},
    
                                             //sort：这一列是否开启排序
    
             {field: "id", width: 100, title: "ID", sort: true},
    
                                             //minWidth:最小显示宽度
    
             {field: "nikiName", title: "昵称", minWidth: 100},
    
                                             //title:表头里的文字内容
    
             {field: "name", title: "姓名", width: 100},
    
                 //field:字段名，要与后端响应的数据字段一致，否则该数据不会在表格中显示
    
             {field: "phone", title: "手机"},
    
             {field: "birthday", title: "生日"},
    
             {field: "sex", width: 80, title: "性别"},
    
             {field: "password", title: "密码"},
    
             {field: "idNumber", title: "身份证号"},
    
             {
    
                 title: "操作",
    
                 width: 150,
    
                 align: "center",
    
                 fixed: "right",
    
                     //toolbar工具栏，可以在表格中添加设定好的按钮，输入存放元素的script代码块的id
    
                 toolbar: "#table-operation"
    
             }]],
    
         //done:表格渲染结束后执行的函数，res：通过请求地址获得的数据。
    
             //curr：当前页码（不太好用，不知道为什么一只显示1），count：数据总条数
    
             //因为done是表格完成渲染后执行的，所以用它来渲染分页工具栏
    
                 done:function (res, curr, count) {
    
                 //显示服务器响应的数据，方便观看
    
             console.log(res)
    
             laypage.render({
    
                 elem: 'data-page',//被渲染的分页栏id，此处不需要加#号
    
                 count: count,//数据总条数
    
                 curr:  res.pageInfo.pageNum,//当前页码
    
                 limit: res.pageInfo.pageSize,//当前页展示的最大行数
    
                 limits: limits,//分页大小选项
    
                     //分页栏的样式，具体情况可以去layui镜像网站查看
    
                 layout:['count','prev','page','next','limit','skip'],
    
                     //jump函数在操作分页栏后执行
    
                     //obj：当前分页栏的所有属性值
    
                     //first:是否是第一次加载
    
                 jump:function (obj,first) {
    
                     //将当前分页栏的属性打印在控制台，方便观察
    
                     console.log(obj)
    
                     //当操作分页栏后，获得当前页码的数据，赋值给隐藏的用来存放页码的输入框
    
                     $("#pageNum").val(obj.curr)                    
    
                     //同理它是赋值给pageSize的
    
                     $("#pageSize").val(obj.limit)
    
                     //如果是首次加载页面，那就不执行
    
                     if (!first){
    
                     //不是首次加载页面的话，就触发按钮的提交事件
    
                         $("#getUser").click()
    
                     }
    
                 }
    
             });
    
         },
    
             //设定容器高度
    
         height: "full-220",
    
         text: "对不起，加载出现异常！"
    
     });

 //submit后面括号里跟的值是lay-filter的值

    
 //回调函数里的data就是lay-filter所在元素的所有的值
    
 form.on('submit(LAY-user-front-search)', function (data) {
    
             //data.field包含的就是所有表单的数据了
    
         var filed = data.field;
    
             //使用table.reload()方法让表格重新加载，也就是重新调用一下上面编写的table.render()方法
    
         //reload第一个参数也是lay-filter的值，只不过这个值要填写表格所在元素的lay-filter的值
    
             //后面的参数则是一些table的基本参数，其中的where表示的是表格请求地址携带的其他参数
    
             table.reload("data-table", {
    
                 //将表单中的数据传递给表格渲染模块发送带服务器
    
             where:filed
    
         });
    
     });

 public class ResultMsg {

    
     private Integer code = 0;
    
     private String msg = "";
    
     private Object data;
    
     private Long count;
    
  
    
     private PageInfo pageInfo;
    
  
    
     public ResultMsg() {
    
     }
    
     public ResultMsg(PageInfo pageInfo) {
    
     this.data = pageInfo.getList();
    
     this.count = pageInfo.getTotal();
    
     this.pageInfo = pageInfo;
    
     }

     @RequestMapping("/user/list")

    
     @ResponseBody
    
     public ResultMsg<User> getUserList(User user,
    
                              @RequestParam(defaultValue = "1")Integer pageNum,
    
                              @RequestParam(defaultValue = "15")Integer pageSize){
    
     PageInfo<User> pageInfo = service.getUserList(user, pageNum, pageSize);
    
     System.out.println(pageInfo);
    
     ResultMsg<User> resultMsg = new ResultMsg<>(pageInfo);
    
     return resultMsg;
    
     }