| layUI分页功能讲解及后台+前端实现 | 您所在的位置：网站首页 › 苹果6s下不了王者荣耀 › layUI分页功能讲解及后台+前端实现 |
layUI分页功能讲解及后台+前端实现
|
文章目录
一：原理讲解二：表格HTML代码三：js代码四：后台代码
参考下列博文，踩坑好几天，做个记录
博文一：
博文二：
一：原理讲解
在LAYUI中，自带一个分页page控件，当我们将page设为true时就会有下面的分页控件，但是分不了页，因为没有后台控制数据和一个 laypage.render去控制分页的逻辑实现 function getFormLimitData代码： function getFormLimitData(productGroupId,curnum,count) { layui.use('table',function () { var table = layui.table; var laypage = layui.laypage; //第一个实例 table.render({ elem: '#demo' , height: 450 ,type:'post' , url: "AssociationAnalysisServlet?method=formData"//数据接口 , page: true //开启分页 , cols: [[ //表头 {templet: '#xuhao', title: 'ID', width: 80, sort: true, fixed: 'left'} , {templet: '#formMedincine', title: '关联规则', width: 620} ]] ,done: function(data, 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; productGroupId=count; getFormLimitData(productGroupId,curnum,limitcount); } } }) } }); }); } 四：后台代码由于代码不是从数据库得到的，所以这者给出跟分页相关的部分代码 public void formData(HttpServletRequest req, HttpServletResponse resp) throws Exception { req.setCharacterEncoding("UTF-8"); resp.setContentType("text/html;charset=utf-8"); // 一个list存放多条数据包装类 List medicineTableData = new ArrayList(); int currentPage = Integer.parseInt(req.getParameter("page") == null ? "1" : req.getParameter("page")); int limit = Integer.parseInt(req.getParameter("limit") == null ? "10" : req.getParameter("limit")); System.out.println("page"+currentPage+"limit:"+currentPage); //截取分页数据，从（page-1）*limit的位置到page*limit的位置，共limit个数据 if((count-(currentPage-1)*limit)/limit==0){ limitData=new ArrayList(medicineTableData.subList((currentPage-1)*limit,count)); }else { limitData=new ArrayList(medicineTableData.subList((currentPage-1)*limit,currentPage*limit)); } JSONObject obj = new JSONObject(); obj.put("code", 0); obj.put("msg", ""); obj.put("count", count); obj.put("data", limitData); PrintWriter out = resp.getWriter(); String correlationCoefficientListJson = obj.toJSONString(); out.print(correlationCoefficientListJson); } |
而当我们增加laypage.render的代码后（代码见下文）点击分页的页码时，layUI会内置一个ajax去向后台请求后面的数据，大家可以按住F12进入network控制台，当点击页码时就会出现下图的提交 
对比表格的ajax的URL 
会发现多了两个参数一个page一个limit，这是layUI自动添加的，大家不要以为是我自己写的ajax想后台请求的啊，所以这样的话我们需要在后台接收这两个参数，并将它作为划分数据的依据，也就是说前端请求后台要数据，而后台给一部分数据到前台，并不是一次性查询所有数据送到前端，根据这思路这就很好实现了 
【本文地址】
公司简介
联系我们