Layui 分页功能 DEMO
参考文档
http://www.layui.com/demo/laypage.html
http://www.layui.com/doc/modules/laypage.html
官方DEMO 对已知静态数据分页
<div id="demo20"></div> <!--分页数据的显示区域--> <ul id="biuuu_city_list"></ul> <!--分页页码的显示区域--> <script src="//res.layui.com/layui/layui.js" charset="utf-8"></script> <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 --> <script> layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage // 调用分页组建 ,layer = layui.layer; // 调用layer弹窗组建 //测试数据 var data = [ '北京', '上海', '广州', '深圳', '杭州', '长沙', '合肥', '宁夏', '成都', '西安', '南昌', '上饶', '沈阳', '济南', '厦门', '福州', '九江', '宜春', '赣州', '宁波', '绍兴', '无锡', '苏州', '徐州', '东莞', '佛山', '中山', '成都', '武汉', '青岛', '天津', '重庆', '南京', '九江', '香港', '澳门', '台北' ]; //调用分页 laypage.render({ elem: 'demo20' // 存放分页的容器,值可以是容器ID、DOM对象 ,count: data.length //数据总数。一般通过服务端得到 ,limit: 10 // 每页显示的条数 默认值为10 ,jump: function(obj){ // 回调函数 ,也可执行ajax读取服务端数据然后通过layui的模版引擎进行渲染操作 //模拟渲染 document.getElementById('biuuu_city_list').innerHTML = function(){ var arr = [] ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit); layui.each(thisData, function(index, item){ arr.push('<li>'+ item +'</li>'); }); return arr.join(''); }(); } }); }); </script>
DEMO2 对分页读取服务端数据
<tbody id="listcontent"> <!--html输出内容容器--> </tbody> <div id="page" ><!--页码html输出容器--></div> <script id="demo" type="text/html"> // 定义一个要循环输出的模版 <tr data-id="{{d.id}}"> <td align="center"> <img src="/upload/{{d.image}}"> </td> <td align="center">{{d.name}}</td> <td align="center"> {{d.date_added}} </td> <td align="center"> <input type="checkbox" name="product_id[]" value="{{d.product_id}}" title="选定"> </td> </tr> </script> <script type="text/javascript"> layui.use(['layer','laypage','laytpl','form','laydate'], function(){ var $ = layui.jquery, form = layui.form, laypage = layui.laypage, laytpl = layui.laytpl; //分页 var curr; laypage.render({ elem: 'page' // 页码显示的容器 ,limit:10 ,count: '{$count}' //总页数 ,groups: 5 //连续显示分页数 ,jump: function(obj, first) { // 分页回调函数 数据渲染逻辑在此函数中执行 layer.closeAll(); curr = obj.curr; p = curr; document.getElementById('listcontent').innerHTML=''; $.ajax({ // ajax从服务端获取数据 type: "GET", url: "", // 空为当前页 ajax请求的接口 data: {p:curr}, async: false, success: function(data){ if(data) { layui.each(data,function(k,v){ // jquery循环遍历输出 服务端请求过来的数据 var getTpl = document.getElementById('demo').innerHTML; // 获取模版引擎模版信息 laytpl(getTpl).render(v, function(html){ // 通过layui模版引擎渲染数据 document.getElementById('listcontent').innerHTML += html; // 把模版引擎渲染后的数据打印到 id为listcontent 的容器中 }); }); }else{ document.getElementById('content1').innerHTML="<div style='text-align:center'>还没有相关数据!</div>"; } } }); form.render(); //更新表单渲染 } }); }); </script>