layui实现数据分页功能
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=' + limitsize12 /*, 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: false23 , height: 43024 ,done: function(res, curr, count){25 //如果是异步请求数据方式，res即为你接口返回的信息。26 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度27 laypage.render({28 elem:'laypage'29 ,count:count30 ,curr:curnum31 ,limit:limitcount32 ,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
来源：https://www.cnblogs.com/lgx5/p/14778196.html