layui-ssm-mybatis插件pagehelper 分页查询

1、html 部分：table用于加载数据的，div是显示分页条用的

 

2、JS 部分

layui.use(['laydate','form', 'table','element','laypage'], function () {

        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;

        var element = layui.element;

        form.render();
        element.init();

        // 分页功能
        var laypage = layui.laypage;
        var url = "${ctxPath}/moneyDetail/selectMoneyDetailALL";
        var config = {page:1,limit:10};
        $.getJSON(url,config,function(res){
        laypage.render({
          elem: 'page1',
          count: res.count, //总条数
          limit:config.limit, //每页条数
        layout: ['count', 'prev', 'page', 'next', 'skip'],
          theme: '#FFB800', //自定义颜色
          jump: function(obj, first){
              if(!first){ //首次则不进入
              config.page = obj.curr;
              getUserListByPage(url,config);
              }
          }
         });
        parseUserList(res.data.list,config.page);  

        }); 

        //点击页数从后台获取数据
        function getUserListByPage(url,config){
        $.getJSON(url,config,function(res){
        parseUserList(res.data.list,config.page);
        });

        }

        //解析数据，currPage参数为预留参数，当删除一行刷新列表时，可以记住当前页而不至于显示到首页去
        function parseUserList(res,currPage){
        table.render({
                elem: '#list',
                data: res,//数据接口,
                page: false,
                cols: [[ //表头
                    {field: 'detailId', title: 'ID', width:'8%', sort: true, fixed: 'left',style:'height:50px;',align:'center'},
                    {field: 'title', title: '标题', width:'15%',style:'vertical-align: middle',align:'center'},
                    {field: 'type', title: '类型（进账/出账）', width:'15%',templet: '#type',align:'center'},
                    {field: 'userName', title: '用户名称', width: '15%',align:'center'},
                    {field: 'amount', title: '金额', width: '10%',align:'center',templet:'#amount'},
                    {field: '', title: '是否分红', width: '10%',align:'center'},
                    {field: 'addTime', title: '添加时间', width: '15%',align:'center',templet: '#addTime'},
                    {field: 'couredit', title: '操作',width: '10%',templet: '#couredit',toolbar: '#barDemo',align:'center'}
                ]]
            });
       
        }

});

3、 java 部分

    3.1、Controller

    @ResponseBody
@RequestMapping("/selectMoneyDetailALL")
public Object selectMoneyDetailALL(@RequestParam("page") Integer pageNum,@RequestParam("limit") Integer pageSize) {
PageInfo list = mrtMoneyDetailService.selectMoneyDetailALL(pageNum,pageSize);

int count = (int) list.getTotal();

//TODO isCommition字段数据库不存在，后期报错再改

LayUIResult result = LayUIResult.build(0, "", list); // 这个是我返回的数据格式，可以可以自己定义
result.setCount(count);    // 尾部以把该封装类贴出来
return result;
}

        3.2、serive

           PageInfo selectMoneyDetailALL(Integer pageNum, Integer pageSize);

        3.3、serviceImpl

        public PageInfo selectMoneyDetailALL(Integer pageNum, Integer pageSize) {
MrtMoneyDetailExample example = new MrtMoneyDetailExample();
PageHelper.startPage(pageNum, pageSize);
List list = mrtMoneyDetailMapper.selectMoneyDetailALL(example);
return new PageInfo<>(list);

}

这里就可以了

我这里返回的数据格式：你可以简化格式

    

{
    "code": 0, 
    "msg": "", 
    "count": 152, 
    "data": {
        "pageNum": 1, 
        "pageSize": 10, 
        "size": 10, 
        "startRow": 1, 
        "endRow": 10, 
        "total": 152, 
        "pages": 16, 
        "list": [
            {
                "detailId": 237, 
                "title": "分红提现", 
                "type": 2, 
                "userId": 328, 
                "amount": 50000, 
                "addTime": 1525731979, //这是时间戳，关于时间戳的转化我一篇文章写了
                "moneyType": 8, 
                "cid": 0, 
                "ccid": 0, 
                "courseId": 0, 
                "userName": "xxxxx", 
                "mrtUser": {
                    "userId": 328, 
                    "nickname": "xxxx, 
                    "headimgurl": "https://wx.qlogo.cn/mmopen/vi_32/8eGCSSKSeu0OVSnk1wvvqYQcBpDOcBTVMABLVBuQLBRXpNLibtY6xe8RZDVkSRJQBTxCHzMef1yQHR3dRSNg8GA/0", 
                    "pid": 225, 
                    "ppid": 230, 
                    "userToken": "xxxxxxx", 
                    "userType": 2, 
                    "commission": 0, 
                    "loginTime": 1525739078, 
                    "registerTime": 1523890102, 
                    "address": "内蒙古鄂尔多斯市东胜区", 
                    "brandId": 61, 
                    "wxcode": "2257477090", 
                    "position": "xxxxxxxxx", 
                    "phone": "xxxxxxxxxxx", 
                    "mail": "xxxxxxxxxxx.163.@ppcom", 
                    "access": 1, 
                    "loginNum": 103, 
                    "zan": 2, 
                    "colorfulShow": null
                }
            }, 
            {}, 
            {}, 
            {}, 
            {}, 
            {}, 
            {}, 
            {}, 
            {}, 
            {}
        ], 
        "firstPage": 1, 
        "prePage": 0, 
        "nextPage": 2, 
        "lastPage": 8, 
        "isFirstPage": true, 
        "isLastPage": false, 
        "hasPreviousPage": false, 
        "hasNextPage": true, 
        "navigatePages": 8, 
        "navigatepageNums": [
            1, 
            2, 
            3, 
            4, 
            5, 
            6, 
            7, 
            8
        ]
    }
}

封装类

package cn.meiriting.common.pojo;


import java.lang.reflect.Array;
import java.util.List;


import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;


/**
 * 自定义响应结构
 */
public class LayUIResult {


    // 定义jackson对象
    private static final ObjectMapper MAPPER = new ObjectMapper();


    // 响应业务状态,0   
    private Integer code;


    // 响应消息
    private String msg;
    // 数据总数
    private Integer count;


    // 响应中的数据
    private Object data;
    


    public static LayUIResult build(Integer code, String msg, Object data) {
        return new LayUIResult(code, msg, data);
    }


    public static LayUIResult ok(Object data) {
        return new LayUIResult(data);
    }


    public static LayUIResult ok() {
        return new LayUIResult(null);
    }


    public LayUIResult() {


    }


    public static LayUIResult build(Integer code, String msg) {
        return new LayUIResult(code, msg, null);
    }
    
    public static LayUIResult build(Integer code, String msg,int count) {
    LayUIResult result = new LayUIResult(code, msg, null);
   
        return new LayUIResult(code, msg, null);
    }


    public LayUIResult(Integer code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
        if(data!=null&&data.getClass().isArray()) {
        this.count = Array.getLength(data);;
        }
    }


    public LayUIResult(Object data) {
        this.code = 200;
        this.msg = "OK";
        this.data = data;
        if(data!=null&&data.getClass().isArray()) {
        this.count = Array.getLength(data);;
        }
    }


//    public Boolean isOK() {
//        return this.code == 200;
//    }


    public Integer getCode() {
        return code;
    }


    public void setCode(Integer code) {
        this.code = code;
    }


    public String getMsg() {
        return msg;
    }


    public void setMsg(String msg) {
        this.msg = msg;
    }


    public Object getData() {
        return data;
    }


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


    public Integer getCount() {
return count;
}


public void setCount(Integer count) {
this.count = count;
}


/**
     * 将json结果集转化为MeiritingResult对象
     * 
     * @param jsonData json数据
     * @param clazz MeiritingResult中的object类型
     * @return
     */
    public static LayUIResult formatToPojo(String jsonData, Class clazz) {
        try {
            if (clazz == null) {
                return MAPPER.readValue(jsonData, LayUIResult.class);
            }
            JsonNode jsonNode = MAPPER.readTree(jsonData);
            JsonNode data = jsonNode.get("data");
            Object obj = null;
            if (clazz != null) {
                if (data.isObject()) {
                    obj = MAPPER.readValue(data.traverse(), clazz);
                } else if (data.isTextual()) {
                    obj = MAPPER.readValue(data.asText(), clazz);
                }
            }
            return build(jsonNode.get("code").intValue(), jsonNode.get("msg").asText(), obj);
        } catch (Exception e) {
            return null;
        }
    }


    /**
     * 没有object对象的转化
     * 
     * @param json
     * @return
     */
    public static LayUIResult format(String json) {
        try {
            return MAPPER.readValue(json, LayUIResult.class);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }


    /**
     * Object是集合转化
     * 
     * @param jsonData json数据
     * @param clazz 集合中的类型
     * @return
     */
    public static LayUIResult formatToList(String jsonData, Class clazz) {
        try {
            JsonNode jsonNode = MAPPER.readTree(jsonData);
            JsonNode data = jsonNode.get("data");
            Object obj = null;
            if (data.isArray() && data.size() > 0) {
                obj = MAPPER.readValue(data.traverse(),
                        MAPPER.getTypeFactory().constructCollectionType(List.class, clazz));
            }
            return build(jsonNode.get("code").intValue(), jsonNode.get("msg").asText(), obj);
        } catch (Exception e) {
            return null;
        }
    }


}