您的位置:首页 > 产品设计 > UI/UE

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

2018-05-24 23:37 459 查看

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

<table class="layui-table" id="list" lay-filter="list" class="layui-table" lay-even="" lay-skin="row">

</table>

<div id="page1"></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<MrtMoneyDetail> 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<MrtMoneyDetail> selectMoneyDetailALL(Integer pageNum, Integer pageSize);

        3.3、serviceImpl

        public PageInfo<MrtMoneyDetail> selectMoneyDetailALL(Integer pageNum, Integer pageSize) {
MrtMoneyDetailExample example = new MrtMoneyDetailExample();
PageHelper.startPage(pageNum, pageSize);
List<MrtMoneyDetail> 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;
        }
    }


}


阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: