版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36476972/article/details/72841561
layPage官网:http://www.layui.com/laypage/ .
laypage强大在哪里呢？
我们都知道用后台写分页是件麻烦事，layPage正是解决了这些繁琐的操作。那么分页的任务就让我们交给layPage吧。
根据贤心作者的demo，让咱们耍耍吧。
首先官方下载layPage ，由于layPage功能已经比较完善 估计以后很少更新了。
解压layPage 把laypage文件夹放到你的项目，只需要引入js就够了。
官方Demo：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layPage demo</title>
<meta name="keywords" content="分页插件,ajax分页,异步分页">
<meta name="description" content="laypage是一款多功能的js分页组件，主要应用于前端页面Ajax普通分页以及信息流加载，并且可无缝迁移至Node.js平台。laypage不依赖于任何第三方库，直接拿来用即可，它的接口继承了layui系列组件的一贯简洁，极易上手。那么，从现在开始，将分页的任务交给laypage吧！">
</head>
<body>
<ul id="biuuu_city_list"></ul>
<div id="biuuu_city"></div>
<div style="width:800px; margin:100px 0 0; font-size:14px;">
<p>====================================================================</p>
<p>把laypage整个目录放入你的项目，只需引入laypage.js即可，其它一律无视。</p>
<p>详细文档打开demo，或者直接进入官网：<a href="http://laypage.layui.com">http://laypage.layui.com</a></p>
<p>使用时请保留来源，感谢支持。</p>
<p>MIT 最终解释权：贤心 - layui.com</p>
</div>
<script src="laypage/laypage.js"></script>
<script>
//测试数据
var data = [
'北京',
'上海',
'广州',
'深圳',
'杭州',
'长沙',
'合肥',
'宁夏',
'成都',
'西安',
'南昌',
'上饶',
'沈阳',
'济南',
'厦门',
'福州',
'九江',
'宜春',
'赣州',
'宁波',
'绍兴',
'无锡',
'苏州',
'徐州',
'东莞',
'佛山',
'中山',
'成都',
'武汉',
'青岛',
'天津',
'重庆',
'南京',
'九江',
'香港',
'澳门',
'台北'
];
var nums = 5; //每页出现的数量
var pages = Math.ceil(data.length/nums); //得到总页数
var thisDate = function(curr){
//此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
var str = '', last = curr*nums - 1;
last = last >= data.length ? (data.length-1) : last;
for(var i = (curr*nums - nums); i <= last; i++){
str += '<li>'+ data[i] +'</li>';
}
return str;
};
//调用分页
laypage({
cont: 'biuuu_city',
pages: pages,
jump: function(obj){
document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
}
})
</script>
</body>
</html>看看这个效果：
我根据这个demo使用了ajax加载 ，随便改了改就可以了。
页面东西太多 我只贴上相关的
<script type="text/javascript" src="${ctxStatic}/laypage/laypage.js"></script>
/* 这里写ajax请求的数据 */
<ul id="biuuu_city_list" class="fly-list"></ul>
/* 这里写分页的显示 */
<div id="biuuu_city" style="text-align: center;"></div>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
method:'post',
url:'${ctx}/getAllPostsList',
dataType:'json',
success:function(data){
if(data.length>0){
var nums = 5; //每页出现的数量
var pages = Math.ceil((data.length)/nums); //得到总页数
alert("nums:"+nums+"pages:"+pages);
var thisDate = function(curr){
//此处只是演示，实际场景通常是返回已经当前页已经分组好的数据
var str = '', last = curr*nums - 1;
last = last >= data.length ? (data.length-1) : last;
for(var i = (curr*nums - nums); i <= last; i++){
/*for(var i=0;i<data.length;i++){*/
str+='<li class="fly-list-li">'
+'<a href="user/home.html" class="fly-list-avatar">'
+'<img src="http://tp4.sinaimg.cn/1345566427/180/5730976522/0"></img>'
+'</a>'
+'<h2 class="fly-tip">'
+'<a href="${ctx}/getPostById?id='+data[i].id+'">'+data[i].title+'</a>'
+'</h2>'
+'<p>'
+'<span><a href="user/home.html">'+data[i].user_name+'</a></span>'
+'<span>'+data[i].starttime+'</span>'
+'<span>layui框架综合</span>'
+'<span class="fly-list-hint">'
+'<i class="iconfont" title="回答"></i> '+data[i].replyNum+''
+'<i class="iconfont" title="人气"></i> '+data[i].view+''
+'</span>'
+'</p>'
+'</li>';
}
return str;
};
//调用分页
laypage({
cont: 'biuuu_city',
pages: pages, //总页数
groups:3, //连续显示的分页数
skip:true,//是否显示跳转
skin:'yahei', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
jump: function(obj,first){
document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
/* if(!first){
layer.msg('第 '+ obj.curr +' 页');
} 点击弹出当前点击页数 */
}
})
}
}
})
})
</script>