1.## 引入
2.设置一个div来放置分页插件 .......网上教程给的class都是 M-box 或者Pagination,然而css里面是m-style 3.向div添加内容 $('.m-style').pagination({
pageCount:(data.length%size == 0 ? (data.length/size) : (data.length/size)+1),页数
totaldata: data.length,
showData:5,//条数
jump: true,跳转
coping: true,
current: pagenow,
homePage: '首页',
endPage: '末页',
prev_text: "上一页",
next_text: "下一页",
callback: function(p) {
//回调函数
pagenow=p.getCurrent()
page(data,pagenow)
}
})
4.完整代码
$(document).ready(function() {
$.ajax({
url : "findAllBlog",//请求地址
dataType : "json",//数据格式
type : "post",//请求方式
async : false,//是否异步请求
success : function page(data,pagenow) {
//如何发送成功
var html = "";
//分页
var pagenow=pagenow=='success'?"1":pagenow;//这里初始传的值不知道为什么是success 所以使用了三目运算符
var size=5;
for(var i=size*(pagenow-1);i<size*pagenow;i++){
var ls = data[i];//遍历data数组
if (ls!=null){
//如果获取不到数据了就停止遍历
html +="<div class=\"item\">\n"
html+="<div class=\"title\">\n"+
"\t\t\t\t\t\t<a target=\"view_window\" href=\"todetail?blogid="+ls.blogid+"\">"+ls.title+"</a>\n"+
"\t\t\t\t\t</div>\n"+
"\t\t\t\t\t<div class=\"base-info\">\n"+
"\t\t\t\t\t\t<ul>\n"+
"\t\t\t\t\t\t\t<li>\n"+
"\t\t\t\t\t\t\t\t<img src=\""+ls.user.headimage+"\" class=\"xwcms2\"/>\n"+
"\t\t\t\t\t\t\t</li>\n"+
"\t\t\t\t\t\t\t<li>\n"+
"\t\t\t\t\t\t\t\t<a href=\"showbloger?id="+ls.user.id+"\">"+ls.user.username+"</a>\n"+
"\t\t\t\t\t\t\t</li>\n"+
"\t\t\t\t\t\t\t<li>\n"+
"\t\t\t\t\t\t\t\t发布时间: "+ls.blogtime+"\n"+
"\t\t\t\t\t\t\t</li>\n"+
"\t\t\t\t\t\t</ul>\n"+
"\t\t\t\t\t</div>\n"+"\t\t\t\t\t<div class=\"con\">\n"+
"\t\t\t\t\t\t"+ls.content+"\n"+
"\t\t\t\t\t</div>\n"+
"\t\t\t\t</div>"
"</div>"
}
}
$("#ulul").html(html); //在html页面id=ulul的标签里显示html内容
$('.m-style').pagination({
pageCount:(data.length%size == 0 ? (data.length/size) : (data.length/size)+1),
totaldata: data.length,
showData:5,
jump: true,
coping: true,
current: pagenow,
homePage: '首页',
endPage: '末页',
prev_text: "上一页",
next_text: "下一页",
callback: function(p) {
pagenow=p.getCurrent()
page(data,pagenow)
}
})
},
})
})
弄了好久…有点儿坑