layUI:数据表格内的分页功能实现详解

ssm+layui实现layui的数据表格的内置分页功能，效果如上图。

前端JS代码(进行渲染)：

 

思路讲解及踩坑：

在你的table数据表格渲染成功，且打开了page后（就是page：true）。接下来要开始对分页模块里面的参数进行设置了，但是在数据表格内打开的分页与单独的分页模块laypage有些不同。

     如上图，当你一开始渲染成功是，显示的分页效果是这样的，不能跳转其他页码，计算总条数也是显示为“共0条”，是静态的分页效果。一开始我是懵的，不知道怎么去设置这里，让它变成动态的。

     这个时候你需要打开官方文档，你可以看到有个parseData的函数，它是“数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式”。什么意思呢？在你前面进行数据表格进行渲染时，js会根据你的url地址发起请求（如下图所示），并返回后台传过来的数据，然后对这个数据进行解析。

发起请求，res就是返回数据。我返回的数据格式如下图，可以看到，这个函数把res里面的对应数据赋给了“code”,"msg","count","data"四个变量。code代表了返回状态，必须为0，count就是你的数据总条数，我这里就是总共有多少种分类，data在我这里就代表了每个条目里面的数据。当这些值返回以后，分页自然就变成动态的了。

下面说下，后台是怎么实现返回数据的：

事实上，当你的数据表格渲染的时候，自发送的请求自动回带上两个参数page（代表当前是第几页）和limit（该页只能展示多少条数据），如下图

在controller层接收这两个参数，如下图。这里我在下图第三个红框里面的操作，是为了根据每一次的请求的page和size来返回相应的数据（比如page= 2，size= 10，就是说你要在第二页展示10条数据，所以返回数据应该是在数据库中的第10——19条）

接下来我创建了一个类，用来存储需要返回的数据，代码如下

public class ResultMap {

    private int status;
    private String message;
    private int total;
    private T data;

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    @Override
    public String toString() {
        return "ResultMap{" +
                "status=" + status +
                ", message='" + message + '\'' +
                ", total=" + total +
                ", data=" + data +
                '}';
    }

    public ResultMap(){

    }

    public ResultMap(int status,String message,int total,T data){
        this.status = status;
        this.message = message;
        this.total = total;
        this.data = data;
    }
}

将你查询到的数据存到上面这个勒种，再返回给前端即可。

写的有不足之处，还请各位指正。

补充其它层代码：

service层：

impl:

mapper

mapper.xml