zoukankan      html  css  js  c++  java
  • layui的分页

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

       按照上面即可完成分页

    遇事犹豫不决时,须持虎狼之心,行仁义之事
  • 相关阅读:
    UIWebView的使用
    ASP.NET自定义简单分页
    匿名方法、委托和Lambda表达式区分演示(图文解释)
    Windows Phone开发(11):常用控件(下)
    来自CodeCanyo的15个优秀移动应用和工具
    JDK、J2EE、J2SE、J2ME概念详解
    配置Eclipse 实现按任意键代码自动补全
    ASP.NET验证码
    asp.net 压缩解压缩zip文件
    HOOK使用:全局键盘钩子
  • 原文地址:https://www.cnblogs.com/fmlyzp/p/10663321.html
Copyright © 2011-2022 走看看