基于JS分页控件实现简单美观仿淘宝分页按钮效果

发布时间：2016-11-26 06:47:19 所属栏目：教程来源：网络整理

导读：最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接：http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想： 1、少于9页，全部显示 2、大于9页，1、2页显示，中间页码当前页为中心，前后各留两个页码附件中有完整例子的

Html代码

lt;div id="div_pager"gt;lt;/divgt; 
lt;script type="text/javascript"gt; 
//生成分页控件 
kkpager.init({ 
pno : '${p.pageNo}', 
//总页码 
total : '${p.totalPage}', 
//总数据条数 
totalRecords : '${p.totalCount}', 
//链接前部 
hrefFormer : '${hrefFormer}', 
//链接尾部 
hrefLatter : '${hrefLatter}' 
}); 
kkpager.generPageHtml(); 
lt;/scriptgt;

以上是示例中是必传参数，页码、总页数、总记录数这些是要根据获取服务端pager对象当相关值，还有可选的参数：pagerid、isShowTotalPage、isShowTotalRecords、isGoPage、getLink

注意链接算法哟，以下是默认链接算法（这个getLink方法也可以作为config参数）：

Js代码

/****默认链接算法****/ 
getLink : function(n){ 
//这里的算法适用于比如： 
//hrefFormer=http://www.xx.com/news/20131212 
//hrefLatter=.html 
//那么首页（第1页）就是http://www.xx.com/news/20131212.html 
//第2页就是http://www.xx.com/news/20131212_2.html 
//第n页就是http://www.xx.com/news/20131212_n.html 
if(n == 1){ 
return this.hrefFormer + this.hrefLatter; 
}else{ 
return this.hrefFormer + '_' + n + this.hrefLatter; 
} 
}

CSS代码：

#div_pager{ 
clear:both; 
height:30px; 
line-height:30px; 
margin-top:20px; 
color:#999999; 
} 
#div_pager a{ 
padding:4px 8px; 
margin:10px 3px; 
font-size:12px; 
border:1px solid #DFDFDF; 
background-color:#FFF; 
color:#9d9d9d; 
text-decoration:none; 
} 
#div_pager span{ 
padding:4px 8px; 
margin:10px 3px; 
font-size:14px; 
} 
#div_pager span.disabled{ 
padding:4px 8px; 
margin:10px 3px; 
font-size:12px; 
border:1px solid #DFDFDF; 
background-color:#FFF; 
color:#DFDFDF; 
} 
#div_pager span.curr{ 
padding:4px 8px; 
margin:10px 3px; 
font-size:12px; 
border:1px solid #FF6600; 
background-color:#FF6600; 
color:#FFF; 
} 
#div_pager a:hover{ 
background-color:#FFEEE5; 
border:1px solid #FF6600; 
} 
#div_pager span.normalsize{ 
font-size:12px; 
}

效果图：

1、没有数据或只有一页数据时效果