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