layui的分页需要后台配合,这边我使用的是pagehelper
@RequestMapping("findGoods") private String findGoods(Integer cateId, String goodsName,Integer pageNum,Integer pageSize) { JSONObject json = new JSONObject(); PageHelper.startPage(pageNum,pageSize); List<Goods> goods; if (cateId == null && StringUtils.isBlank(goodsName)) { goods = goodsService.findGoods(); } else { goods = goodsService.findGoods(cateId, goodsName); } PageInfo<Goods> personPageInfo = new PageInfo<>(goods); json.put("code",0); json.put("msg",""); json.put("count",personPageInfo.getTotal()); json.put("data",personPageInfo.getList()); return json.toString(); }
pageHelper 使用原理不在此赘述了,但是注意一点就是PageHelper.startPage(pageNum,pageSize);,这句代码要写在执行查询操作之前
layui本身会在table请求传递page 和Limite,但是如此一来我们在点击下一页是page 和limit还会是1和10 所以需要手动设置,而且后台需要返回必须返回count值,用来计算总条数
table.render({ elem: '#goods-table', url: "/Goods/findGoods?cateId=" + cateId + "&goodsName=" + name+"&pageNum="+pageNum+"&pageSize="+pageSize, cellMinWidth: 80, toolbar: '#barTop', cols: [[ {type: 'checkbox', fixed: 'left'}, {field: 'goId', title: 'ID', sort: true, align: 'center'}, {field: 'goodsId', title: '产品编码', sort: true, align: 'center'}, {field: 'modelnum', title: '产品型号', align: 'center'}, {field: 'goodsName', title: '产品名称', align: 'center'}, {field: 'categoryName', title: '分类名称', align: 'center'}, {field: 'price', title: '展示价格', sort: true, align: 'center'}, { field: 'isDefault', title: '是否默认', sort: true, align: 'center', templet: function (d) { return d.isDefault == 0 ? "否" : "是"; } }, {fixed: 'right', title: "操作", align: 'center', toolbar: '#curd'} ]], done: function (res) { laypage.render({ elem: 'goods-page', count: res['count'], curr:pageNum, limit: pageSize, layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'], jump: function (obj, first) { if (first) { return; } initTable(obj.curr, obj.limit,cateId,name); } }); }, });
按照上面即可完成分页