layui分页插件的使用
之前需要引入相应的layui js文件：
1 layui.use(['element', 'layer'], function () { 2 var layer = layui.layer 3 , element = layui.element; 4 5 element.on('tab(demo)', function(data){ 6 loadData(); 7 getPage(); 8 }); 9 10 }) 11 $(function () { 12 loadData(); 13 getPage(); 14 }) 15 var limit = 10; 16 var total; 17 var page = 1; 18 19 function loadData() { 20 var status = $(".layui-this").attr("value"); 21 22 $.ajax({ 23 url: 'viewAll', 24 type: 'post', 25 dataType: 'json', 26 async:false, 27 data: { 28 page: page, 29 limit: limit, 30 status: status 31 }, 32 success: function (result) { 33 if (result.code == 200) { 34 var data = result.data; //page对象 35 36 total = data.totalElements;//总记录数 37 38 var list = data.content;//数据集合 39 40 var html = ""; 41 var div = ""; 42 for (var i = 0; i < list.length; i++) { 43 if (i % 2 == 0) { 44 html += "<div class='layui-col-lg5'>" + 45 " <li class='overdate' value='"+list[i].sealId+"' id='"+list[i].userId+"'>" + 46 " <h4>" + list[i].userName + "</h4>" + 47 " <p>" + list[i].title + "，过期时间为：" + list[i].endTime + "</p>" + 48 " <div class='msgTime'>通知时间：" + list[i].createTime + "</div>" + 49 " </li>" + 50 " </div>"; 51 } else { 52 html += "<div class='layui-col-lg5 layui-col-lg-offset1'>" + 53 " <li class='overdate' value='"+list[i].sealId+"' id='"+list[i].userId+"'>" + 54 " <h4>" + list[i].userName + "</h4>" + 55 " <p>" + list[i].title + "，过期时间为：" + list[i].endTime + "</p>" + 56 " <div class='msgTime'>通知时间：" + list[i].createTime + "</div>" + 57 " </li>" + 58 " </div>"; 59 } 60 } 61 if (status == "all"){ 62 div = $("#content1") 63 } else if (status == "0"){ 64 div = $("#content2") 65 }else if (status == "1"){ 66 div = $("#content3") 67 } 68 div.empty().append(html); 69 } 70 } 71 }) 72 } 73 function getPage() { 74 layui.use(['laypage', 'layer'], function () { 75 var laypage = layui.laypage; 76 $("#demo7").empty() 77 //执行一个laypage实例 78 laypage.render({ 79 elem: 'demo7' //注意，这里的 test1 是 ID，不用加 # 号 80 , count: total //数据总数，从服务端得到 81 , layout: ['count', 'prev', 'page', 'next', limit, 'skip'] 82 , jump: function (obj, first) { 83 //obj包含了当前分页的所有参数，比如： 84 console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。 85 console.log(obj.limit); //得到每页显示的条数 86 page = obj.curr; //改变当前页码 87 limit = obj.limit; 88 status:$("#layui-this").attr("value") 89 // //首次不执行 90 if (!first) { 91 loadData() //加载数据 92 } 93 } 94 }); 95 }) 96 }
