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); } }); }, });
按照上面即可完成分頁
