layui实现数据分页功能

官网layui table演示页面：http://www.layui.com/demo/table.html

示例截图：

页面引入layui.css、 layui.js

 

<div id="pTable" style="width: 1200px;">
                  <table class="layui-table" id="layui_table_id" lay-filter="test">
             </table>
             <div id="laypage"></div>
          </div>

 

===================前台js===================

var limitcount = 10;
    var curnum = 1;
    //列表查询方法
    function productsearch(productGroupId,start,limitsize) {
        layui.use(["table","laypage","laydate"], function(){
            var table = layui.table,
                laydate=layui.laydate,
                laypage = layui.laypage;
            table.render({
                elem: "#layui_table_id"
                , url: "<%=path%>/xx/pListQuery.html?pId="+productGroupId+"¤tPage="+ start+"¤tNumber=" + limitsize
                /*, where:{pagename:start,pagelimit:limitsize} //传参*/
                , cols: [[
                    {field: "productId", title: "ID", width: "170", sort: true}
                    , {field: "productName", title: "名称", width: "450"}
                    , {field: "productState", title: "状态", width: "100"}
                    , {field: "effectTime", title: "生效时间", width: "120", sort: true}
                    , {field: "invalidTime", title: "失效时间", width: "120", sort: true}
                    , {field: "productCost", title: "成本", width: "100", sort: true}
                    , {field: "poperation", title: "操作", width: "100",fixed: "right", toolbar: "#barDemo"}
                ]]
                , page: false
                , height: 430
                ,done: function(res, curr, count){
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    laypage.render({
                        elem:"laypage"
                        ,count:count
                        ,curr:curnum
                        ,limit:limitcount
                        ,layout: ["prev", "page", "next", "skip","count","limit"]
                        ,jump:function (obj,first) {
                            if(!first){
                                curnum = obj.curr;
                                limitcount = obj.limit;
                                //console.log("curnum"+curnum);
                                //console.log("limitcount"+limitcount);
                                //layer.msg(curnum+"-"+limitcount);
                                productsearch(productGroupId,curnum,limitcount);
                            }
                        }
                    })
                }
            })
 
            //监听工具条
            table.on("tool(test)", function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === "detail"){
                    viewLableInfo(data.attrId);
                    layer.msg(data.attrId);
                } else if(layEvent === "del"){
                    layer.msg("删除");
                } else if(layEvent === "edit"){
                    layer.msg("编辑操作");
                }
            });
            //常规用法
            laydate.render({
                elem: "#createDate"
            });
            //常规用法
            laydate.render({
                elem: "#processingTime"
            });
 
        });
    }
      var pId = "${pGBean.pgId }";
productsearch(pId, curnum, limitcount);

 

===================业务逻辑层===================

@Override
      public String queryList (HttpServletRequest request) {
           String total = "";
           String pId = request.getParameter("pId");
            int currentNumber = Integer.parseInt(request.getParameter("currentNumber"));
        String currentPage = request.getParameter("currentPage") == null ? "1" : request.getParameter("currentPage");
        //分页处理，显示第一页的30条数据(默认值)
        PageHelper.startPage(Integer.parseInt(currentPage), currentNumber);
        List<PExl> list = exportDao.queryList (pId);
        if(list.size() > 0){
            total = list.get(0).getTotal();
        }
       
        Page page = PageHelper.localPage.get();
        if(page!=null){
            page.setCurrentPage(Integer.parseInt(currentPage));
        }
        PageHelper.endPage();
 
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("code", 0);
        jsonObject.put("msg", "");
        jsonObject.put("count", total);
        jsonObject.put("data", list);
        //System.out.println("json:----" + jsonObject.toString());
        return jsonObject.toString();
      }

 

===================【sql】===================

其中sql在计算总数totle时可以这么写

COUNT(*) OVER(PARTITION BY 1) AS TOTAL