Layui数据表格分页的实现

最使用layui的过程中发现layui数据表格自带的分页选项page:true并不能真正实现数据表格的分页,这个分页的功能只能在形式上对数据表格进行分页，但实际上的数据还是在同一页上进行显示。因此相对数据进行分页显示必须自己进行处理，下面列举一下两种处理方式：

1 前端所有数据进行分页处理

因为是在后端基本上都写得差不多的情况下才发现不能分页这个问题，所以首先说一下在前端收到所有的数据的情况下对数据进行分页处理。

首先看一下后端返回的数据的格式如下所示：（此处是按照layui数据表格的标准的数据格式返回的）

{"count":"4","data":[{"ordernumber":21,"provideraccount":"11111111111","totalmoney":"46300","status":"已发货","ordertime":1577538744000},{"ordernumber":37,"provideraccount":"99999999999","totalmoney":"262080","status":"已发货","ordertime":1581919097000},{"ordernumber":43,"provideraccount":"99999999999","totalmoney":"11700","status":"已发货","ordertime":1581919104000},{"ordernumber":46,"provideraccount":"99999999999","totalmoney":"5850","status":"已发货","ordertime":1581919292000}],"code":0,"msg":""}

考虑到如果要将数据进行分页显示，就是对data进行分割，并且只选一部分进行输出，此处可以考虑在layui数据表格的parseData回调函数中使用js的slice函数进行分割，再将数据填充到表格中。所以只需要知道当前的要求页码数和每页的条数就可以对通过slice根据分页要求进行分割。当开启layui的分页功能后，使用下面两个变量可以获取到分页需求中当前的页数和每页的数据条数。

this.page.curr  //当前的页数
this.limit      //每页显示的条数

所以代码实现如下所示：

,parseData:function(res){ //res 即为原始返回的数据
    console.log(res);
    var current_pages;
    //第一次显示的时候this.page=true，把这种情况单独列出
    if(this.page===true)current_pages=1;
    else current_pages=this.page.curr;
    //根据分页要求选出需要显示的数据
    var data= res.data.slice(this.limit*(current_pages-1),this.limit*current_pages);
    return {
        "code": res.code,
        "msg":res.msg,
        "count": res.data.length,
        "data": data
    }
}

将上述代码放在layui的表格的配置里面即可。parseData的具体用法可以去layui文档查看。

注意上述代码中的判断语句：

 if(this.page===true)current_pages=1;
    else current_pages=this.page.curr;

是因为在第一次表格数据的请求的时候，this.page=true的，其中不包含curr这个属性，直接使用会一条数据都不显示，只有等刷新表格界面的时候this.page才会包含curr属性，所以加一个判断防止一条数据也不显示。

2 后台进行分页处理

在开启layui的分页功能之后page:true，layui默认情况下发起的GET请求会包含当前的分页信息当参数。http://localhost:8080/store/receives?page=1&limit=10
其中page是当前要求页，limit是每页的数据条数。
在Controller里面获取这两个参数的值，在查数据库的时候只查询指定页数的数据即可，不需要全部查询，可以减小查询数据库的负担。具体分页查询代码就不在这列举了。

上述两种方式不推荐使用第一种方式，因为第一种方式每次都会向后台请求所有数据并接受所有数据，传输了大量无用的数据加大了网络的负担。但如果后端代码已经写好了但没有考虑分页处理且对性能要求不高的时候可以考虑使用第一种方式。