layui的分頁

  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);
                    }
                });
            },
        });

   按照上面便可完成分頁編碼

相關文章
相關標籤/搜索