思路：页面上动态生成 上一页（i-1）， i - 2，i - 1 ，i， i + 1,， i +2 ，下一页（i+1） 。7个按钮。其中 i 是当前页码。
在模板中判断 i - 1 ,i - 2 是否小于0 ，是则不生成按钮。同理判断 i + 1 ，i + 2 是否大于最大页码。
在按钮中自定义属性 date - page存储页码。根据页码发送ajax请求 获取数据。
代码：
我要评论 <script src="../static/assets/vendors/jquery/jquery.js"></script>
<script src="../static/assets/vendors/art-template/template-web.js"></script> //引入模板引擎
<script type = "text/template" id = "pagelist">
{{if(currentpage - 1 > 0)}}<li data-page="{{currentpage - 1}}"><a href="#">上一页</a></li> {{/if}}
{{if(currentpage - 2 > 0)}}<li data-page="{{currentpage - 2}}"><a href="#">{{currentpage - 2}}</a></li>{{/if}}
{{if(currentpage - 1 > 0)}}<li data-page="{{currentpage - 1}}"><a href="#">{{currentpage - 1}}</a></li>{{/if}}
<li class = "active" data-page="{{currentpage}}"><a href="#" >{{currentpage}}</a></li>
{{if(currentpage + 1 <= maxpage)}}<li data-page="{{currentpage + 1}}"><a href="#">{{currentpage + 1}}</a></li>{{/if}}
{{if(currentpage + 2 <= maxpage)}}<li data-page="{{currentpage + 2}}"><a href="#">{{currentpage + 2}}</a></li>{{/if}}
{{if(currentpage + 1 <= maxpage)}}<li data-page="{{currentpage + 1}}"><a href="#">下一页</a></li>{{/if}}
</script>
$(function(){
//页面初始化
var currentpage = 1;
var pagesize = 20;
//参数1（页码）参数2（每页数据条数）
function getpostdata(currentpage,pagesize){
$.ajax({
type:"post",
url:"./api/getposts.php",
data:{
currentpage:currentpage,
pagesize:pagesize
},
datatype:"json",
success:function(res){
if(res.code == 1){
var maxpage = math.ceil(res.count/pagesize); //res.count 后台返回的数据总条数
var page_html = template("pagelist",{currentpage:currentpage,maxpage:maxpage}); //调用模板引擎生成 html 结构
$(".pagination").html(page_html); //注意 不能使用 appendto()追加。html() 相当于局部刷新
}
}
});
}
getpostdata(currentpage,pagesize);
$(".pagination").on("click","li",function(){
//如果点击当前页码 return false
if(currentpage == parseint( $(this).attr("data-page"))){
return false;
}else{
currentpage = parseint( $(this).attr("data-page"));
}
getpostdata(currentpage,pagesize);
});
});
</script>
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论