layui实现数据分页功能

页面引入layui.css、 layui.js

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

前台js

 1 var limitcount = 10;
 2  var curnum = 1;
 3  //列表查询方法
 4  function productsearch(productGroupId,start,limitsize) {
 5   layui.use(['table','laypage','laydate'], function(){
 6    var table = layui.table,
 7     laydate=layui.laydate,
 8     laypage = layui.laypage;
 9    table.render({
10     elem: '#layui_table_id'
11     , url: '<%=path%>/xx/pListQuery.html?pId='+productGroupId+'¤tPage='+ start+'¤tNumber=' + limitsize
12     /*, where:{pagename:start,pagelimit:limitsize} //传参*/
13     , cols: [[
14      {field: 'productId', title: 'ID', width: '170', sort: true}
15      , {field: 'productName', title: '名称', width: '450'}
16      , {field: 'productState', title: '状态', width: '100'}
17      , {field: 'effectTime', title: '生效时间', width: '120', sort: true}
18      , {field: 'invalidTime', title: '失效时间', width: '120', sort: true}
19      , {field: 'productCost', title: '成本', width: '100', sort: true}
20      , {field: 'poperation', title: '操作', width: '100',fixed: 'right', toolbar: '#barDemo'}
21     ]]
22     , page: false
23     , height: 430
24     ,done: function(res, curr, count){
25      //如果是异步请求数据方式，res即为你接口返回的信息。
26      //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
27      laypage.render({
28       elem:'laypage'
29       ,count:count
30       ,curr:curnum
31       ,limit:limitcount
32       ,layout: ['prev', 'page', 'next', 'skip','count','limit']
33       ,jump:function (obj,first) {
34        if(!first){
35         curnum = obj.curr;
36         limitcount = obj.limit;
37         //console.log("curnum"+curnum);
38         //console.log("limitcount"+limitcount);
39         //layer.msg(curnum+"-"+limitcount);
40         productsearch(productGroupId,curnum,limitcount);
41        }
42       }
43      })
44     }
45    })
46  
47    //监听工具条
48    table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
49     var data = obj.data //获得当前行数据
50      ,layEvent = obj.event; //获得 lay-event 对应的值
51     if(layEvent === 'detail'){
52      viewLableInfo(data.attrId);
53      layer.msg(data.attrId);
54     } else if(layEvent === 'del'){
55      layer.msg('删除');
56     } else if(layEvent === 'edit'){
57      layer.msg('编辑操作');
58     }
59    });
60    //常规用法
61    laydate.render({
62     elem: '#createDate'
63    });
64    //常规用法
65    laydate.render({
66     elem: '#processingTime'
67    });
68  
69   });
70  }
71   var pId = '${pGBean.pgId }';
72 productsearch(pId, curnum, limitcount);

业务逻辑层

 1 @Override
 2   public String queryList (HttpServletRequest request) {
 3    String total = "";
 4    String pId = request.getParameter("pId");
 5    int currentNumber = Integer.parseInt(request.getParameter("currentNumber"));
 6   String currentPage = request.getParameter("currentPage") == null ? "1" : request.getParameter("currentPage");
 7   //分页处理，显示第一页的30条数据(默认值)
 8   PageHelper.startPage(Integer.parseInt(currentPage), currentNumber);
 9   List<PExl> list = exportDao.queryList (pId);
10   if(list.size() > 0){
11    total = list.get(0).getTotal();
12   }
13   
14   Page page = PageHelper.localPage.get();
15   if(page!=null){
16    page.setCurrentPage(Integer.parseInt(currentPage));
17   }
18   PageHelper.endPage();
19  
20   JSONObject jsonObject = new JSONObject();
21   jsonObject.put("code", 0);
22   jsonObject.put("msg", "");
23   jsonObject.put("count", total);
24   jsonObject.put("data", list);
25   //System.out.println("json:----" + jsonObject.toString());
26   return jsonObject.toString();
27   }

sql

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

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

 

标签：count,功能,分页,title,curnum,layui,table,limitcount
来源： https://www.cnblogs.com/lgx5/p/14778196.html