最近通过自己的摸索,实现了一个简单的网页分页显示功能,现在分享给大家。有什么不足和改进之处,欢迎大家留言一起讨论,一起学习。
1.先来看看我们最终要实现的效果图(下面以共11页,7页码可见且随点击动态变换)
2.CSS方面我就不详细介绍了,在这里主要说说js的主要实现逻辑和功能
(1)获取页码显示,返回最终需要显示的代码拼接
/** 获取页码显示 */
function setPages(page,dbcount){<span style="font-family: Arial, Helvetica, sans-serif;">//page是目前需要显示的页码,dbcount是页码总数</span>
var aa = "";//要显示的页码
if(page>=4&&dbcount>=7){
if(page>dbcount-3){
for(var i=dbcount-6; i<=dbcount; i++){
if(i==page) aa = aa+"<a href='javascript:void(0)' class='select'>"+page+"</a>";
else aa = aa+"<a href='javascript:void(0)'>"+i+"</a>";
}
}
else {
for(var i=3; i>=-3 && page-i<=dbcount; i--){
if(i==0) aa = aa+"<a href='javascript:void(0)' class='select'>"+page+"</a>";
else aa = aa+"<a href='javascript:void(0)'>"+(page-i)+"</a>";
}
}
}
else if(page<4){
for(var i=1; i<=7 && i<=dbcount; i++){
if(page==i) aa = aa+"<a href='javascript:void(0)' class='select'>"+i+"</a>";
else aa = aa+"<a href='javascript:void(0)'>"+i+"</a>";
}
}
else if(dbcount<=7){
aa = "<a href='javascript:void(0)'>1</a>…";
for(var i=1; i<=dbcount; i++){
if(page==i) aa = aa+"<a href='javascript:void(0)' class='select'>"+i+"</a>";
else aa = aa+"<a href='javascript:void(0)'>"+i+"</a>";
}
}
return aa;//返回最终需要显示的页码拼接
}
(2)调用(1)中的js方法,得到最终结果赋值在页面中显示出来
var aa = setPages(page,dbcount);//page是目前需要显示的页码,dbcount是页码总数
aa = "<span style='cursor: pointer;' οnclick='pageUp()'>《 </span>"
+aa+"<span style='cursor: pointer;' οnclick='pageDown()'>》 </span>";
$(".pages").html(aa);//pages显示区域随
//点击事件
$(".pages a").click(function(){
<span style="white-space:pre"> </span>if($(this).attr("class")!="page1"){
<span style="white-space:pre"> </span>$(".pages a").attr("class","");
<span style="white-space:pre"> </span>$(this).attr("class","select");
<span style="white-space:pre"> </span>//这里加入数据调用的方法,赋值页码page
<span style="white-space:pre"> </span>}
});
(3)上一页“《”和下一页“》”的实现
/** 个人中心~已领取礼包~上一页 */
function pageUp(){
if($(".pages a.select").html()!="1"){
var upPage = parseInt($(".pages a.select").html())-1;
//这里加入数据调用的方法,赋值页码upPage
}
}
/** 个人中心~已领取礼包~下一页 */
function pageDown(){
if($(".pages a.select").html()!=$('.pages a:last').html()){
var downPage = parseInt($(".pages a.select").html())+1;
//这里加入数据调用的方法,赋值页码downPage
}
}
综上是逻辑和主要实现,有什么不明白的地方,欢迎一起讨论。