最新版本代码请移步到https://github.com/pgkk/kkpager

在线测试链接：http://pgkk.github.io/kkpager/example/pager_test.html

分页按钮思想：

1、少于9页，全部显示

2、大于9页，1、2页显示，中间页码当前页为中心，前后各留两个页码

附件中有完整例子的压缩包下载。已更新到最新版本

先看效果图：

01输入框焦点效果

02效果

模仿淘宝的分页按钮效果控件kkpager JS代码：

Js代码

var kkpager = { //divID pagerid : 'div_pager', //当前页码 pno : 1, //总页码 total : 1, //总数据条数 totalRecords : 0, //是否显示总页数 isShowTotalPage : true, //是否显示总记录数 isShowTotalRecords : true, //是否显示页码跳转输入框 isGoPage : true, //链接前部 hrefFormer : '', //链接尾部 hrefLatter : '', /****链接算法****/ getLink : function(n){ //这里的算法适用于比如： //hrefFormer=http:///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、没有数据或只有一页数据时效果

2、有多页时当效果

3、第5页效果

4、第6页效果（分页效果2）

5、第17页效果（接近尾页效果）

6、尾页效果

7、输入框焦点效果

最后注意，若要使用，使用时请修改分页获取链接当算法，不然不适用哟

里面输入框我把ID写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修修，呵呵

以上所述是小编给大家介绍的基于JS分页控件实现简单美观仿淘宝分页按钮效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！