时间：2021-07-01 10:21:17 帮助过：3人阅读
效果图：
代码：
html代码：
分页器
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
以上就是本文的全部内容，希望对大家的学习有所帮助。