layui的分頁須要後臺配合,這邊我使用的是pagehelperjson
@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);,這句代碼要寫在執行查詢操做以前app
layui自己會在table請求傳遞page 和Limite,可是如此一來咱們在點擊下一頁是page 和limit還會是1和10 因此須要手動設置,並且後臺須要返回必須返回count值,用來計算總條數ui
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); } }); }, });
按照上面便可完成分頁編碼