效果图:

代码:
html代码:
分页器 script>
css代码:
.pager-box:after{
display:block;
height:0;
visibility:hidden;
clear:both;
content:'';
}
.pager{
float:left;
position:relative;
left:50%;
font-family:微软雅黑;
}
.pager a,.pager span{
position:relative;
left:-50%;
display:block;
float:left;
margin-left:5px;
border:1px solid #b6bcc1;
padding: 5px 10px;
text-decoration:none;
color:#b6bcc1;
border-radius:3px;
}
.pager span{
border:0;
}
.pager a.js-selected{
background:#b6bcc1;
color:#fff;
cursor:default;
}
.pager a.js-disabled{
background:#f1f1f1;
border-color:#f1f1f1;
cursor:default;
color:#fff;
}pager.js代码
主要思路:
分页器共分为以下4种情况:

情况1,当total < 8 时,所有的页码全部显示。
情况2,当total >= 8 且 index < 5时,显示1-6和最后一页。
情况3,当total >= 8 且 index > total - 4时,显示1和最后6项。
情况4,当total >= 8 且 5 <= index <= total - 4时,显示1和最后一页,和中间5项。
Pager类实例化时传入一个设置对象:
当我们实例化Pager时,执行Pager函数体内的语句,首先赋值,然后就执行初始化函数:
初始化函数this.__init结构:
初始化完成,点击后就会做出相应的判断,并使用this._$setIndex(index)进行跳转。
更多关于分页教程的文章,请查看以下专题:
javascript分页功能操作
jquery分页功能操作
php分页功能操作
ASP.NET分页功能操作
下载:paper