标签：
最近发现一个特别好用的前端分页插件，分享一下
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>layPage demo</title> 6 <meta name="keywords" content="分页插件,ajax分页,异步分页"> 7 <meta name="description" content="laypage是一款多功能的js分页组件，主要应用于前端页面Ajax普通分页以及信息流加载，并且可无缝迁移至Node.js平台。laypage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将分页的任务交给laypage吧！"> 8 </head> 9 <body> 10 11 <ul id="biuuu_city_list"></ul> 12 13 <div id="biuuu_city"></div> 14 15 <script type="text/javascript"> 16 /*960*90*/ 17 var cpro_id = "u2471221"; 18 </script> 19 <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script> 20 21 <script src="http://res.layui.com/lay/lib/laypage/laypage.js"></script> 22 <script> 23 24 //测试数据 25 var data = [ 26 ‘北京‘, 27 ‘上海‘, 28 ‘广州‘, 29 ‘深圳‘, 30 ‘杭州‘, 31 ‘长沙‘, 32 ‘合肥‘, 33 ‘宁夏‘, 34 ‘成都‘, 35 ‘西安‘, 36 ‘南昌‘, 37 ‘上饶‘, 38 ‘沈阳‘, 39 ‘济南‘, 40 ‘厦门‘, 41 ‘福州‘, 42 ‘九江‘, 43 ‘宜春‘, 44 ‘赣州‘, 45 ‘宁波‘, 46 ‘绍兴‘, 47 ‘无锡‘, 48 ‘苏州‘, 49 ‘徐州‘, 50 ‘东莞‘, 51 ‘佛山‘, 52 ‘中山‘, 53 ‘成都‘, 54 ‘武汉‘, 55 ‘青岛‘, 56 ‘天津‘, 57 ‘重庆‘, 58 ‘南京‘, 59 ‘九江‘, 60 ‘香港‘, 61 ‘澳门‘, 62 ‘台北‘ 63 ]; 64 65 var nums = 5; //每页出现的数量 66 var pages = Math.ceil(data.length/nums); //得到总页数 67 68 var thisDate = function(curr){ 69 //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据 70 var str = ‘‘, last = curr*nums - 1; 71 last = last >= data.length ? (data.length-1) : last; 72 for(var i = (curr*nums - nums); i <= last; i++){ 73 str += ‘<li>‘+ data[i] +‘</li>‘; 74 } 75 return str; 76 }; 77 78 //调用分页 79 laypage({ 80 cont: ‘biuuu_city‘, 81 pages: pages, 82 jump: function(obj){ 83 document.getElementById(‘biuuu_city_list‘).innerHTML = thisDate(obj.curr); 84 85 } 86 }) 87 </script> 88 89 <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id=‘cnzz_stat_icon_30088308‘%3E%3C/span%3E%3Cscript src=‘" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308‘ type=‘text/javascript‘%3E%3C/script%3E"));</script> 90 91 </body> 92 </html>
标签：
原文地址：http://www.cnblogs.com/richard1015/p/5394894.html
