<div></div> <script type="text/javascript"> //生成分页控件 kkpager.init({ pno : '${p.pageNo}', //总页码 total : '${p.totalPage}', //总数据条数 totalRecords : '${p.totalCount}', //链接前部 hrefFormer : '${hrefFormer}', //链接尾部 hrefLatter : '${hrefLatter}' }); kkpager.generPageHtml(); </script>
以上是示例中是必传参数，页码、总页数、总记录数这些是要根据获取服务端pager对象当相关值，还有可选的参数：pagerid、isShowTotalPage、isShowTotalRecords、isGoPage、getLink
注意链接算法哟，以下是默认链接算法（这个getLink方法也可以作为config参数）：
Js代码
/****默认链接算法****/ getLink : function(n){ //这里的算法适用于比如： //hrefFormer=http://www.xx.com/news/20131212 //hrefLatter=.html //那么首页（第1页）就是 //第2页就是 //第n页就是 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、没有数据或只有一页数据时效果
2、有多页时当效果
3、第5页效果
4、第6页效果（分页效果2）
5、第17页效果（接近尾页效果）
6、尾页效果
7、输入框焦点效果
最后注意，若要使用，使用时请修改分页获取链接当算法，不然不适用哟
里面输入框我把ID写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修修，呵呵
以上所述是小编给大家介绍的基于JS分页控件实现简单美观仿淘宝分页按钮效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: