layui实现数据分页功能的方法
这篇文章将为大家详细讲解有关layui实现数据分页功能的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了梁平免费建站欢迎大家使用!
我们先来看下官网的演示画面。
具体代码:
页面引入layui.css、 layui.js
前台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); Listlist = 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
关于“layui实现数据分页功能的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
文章标题:layui实现数据分页功能的方法
当前路径:http://hbruida.cn/article/gcijgj.html