本篇文章给大家带来的内容是关于原生js实现可以带上下翻页的翻页功能（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
翻页功能在渲染数据时经常用到，下面是使用原生js去实现的一个翻页功能，带上下翻页功能，效果图如下：
主要步骤/思路：
实现页面效果；
点击页码时，根据情况判断，控制翻页变化，有以下几种情况：
（a）.总页数 > 限制页数 =》有10页，限制每次只显示5页
（a）.总页数 = 限制页数 =》只返回1页，显示每次只显示5页
（a）.总页数
3. 上下翻页功能，根据翻页情况，第一页和最后一页时，应该移除翻页的功能等；
页面效果实现：
html
css
/** 分页 */
.pagination{
display: inline-block;
}
.pagination>ul{
padding: 0;
margin: 0;
display: inline-block;
border: 1px solid #e2e2e2;
}
.pagination>ul>li{
float: left;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e2e2e2;
}
.pagination>ul>li:first-child{
background-color: rgb(30, 159, 255);
}
.pagination>ul>li:last-child{
border-right-width: 0px;
}
.pagination>ul>li>a{
display: inline-block;
width: 38px;
height: 30px;
line-height: 30px;
text-align: center;
color: #333;
}
.pagination>ul>li>a:hover{
opacity: 0.7;
}
.pagination>a{
display: inline-block;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
color: #333;
border: 1px solid #e2e2e2;
}
.pagination a.page-pre{
margin-right: -1px;
float: left;
color: #d2d2d2;
cursor: not-allowed;
border-right-width: 0px;
}
.pagination a.page-next{
float: right;
border-left-width: 0px;
}
/* 分页 end **/实现翻页效果
var pagination = function (o){
/**
* 翻页会出现的情况：
* 总页数 > 限制页数 30 > 10
* 总页数 < 限制页数 5 < 10
* 总页数 = 限制页数 10 = 10
* @var pnCount - 显示多少页码 => 限制显示页码 < 页码总数 （按限制显示） ： 限制显示页码 > 页码总数 （按页码总数显示）
* @var midN - 翻页的中间页码位置
*
*/
var config = {
count: o.count || 10,
limit: o.limit || 5, //每页显示的条数
};
var count = config.count,
limit = config.limit,
eUl = dorea(".pagination ul")[0],
ePre = dorea(".pagination .page-pre")[0],
eNext = dorea(".pagination .page-next")[0],
eUlChild = eUl.children,
pnCount = limit < count ? pnCount = limit : pnCount = count,
midN = Math.ceil( pnCount / 2 );
/* 初始化上下翻页的页码 */
ePre.setAttribute("data-page","1");
eNext.setAttribute("data-page","1");
/*
* @func renderPag
* @desc 渲染分页
* @param { string } startN - 页码起始数
* @param { string } currP - 当前页数 ，初始化该函数时可不传
* @var childLen - 所有的子元素（页码）的长度
*/
var renderPag = function (startN,currP){
var childLen = eUlChild.length;
/* 渲染前先清空所有页码 */
for ( var d = childLen-1; d>=0; d-- ) {
eUlChild[d].parentNode.removeChild(eUlChild[d]);
}
/* 渲染页码 */
for ( var i = startN; i limit
* a). limit的前半部分页码，例如 10,5 ，前半部分是 1,2 => 起始页为 1
* b). limit的后半部分页码，例如 10,5 ，后半部分是 9,10 => 起始页为 (count-limit)+1
* b). limit的中间部分，例如 10,5 ，中间部分是 4-7 => 起始页为 (当前页 - (limit/2))+1
* 情况：2) count = limit => 起始页为 1
* 情况：3) count < limit => 限制10条，但真实数据确只有5条
* a). 发生这类情况，限制条数应以总数据条数为准则
*
*/
var turnPag = function (cp){
console.log("当前第 "+cp+" 页");
if (count>limit) {
if ( cp<=midN ) { //判断是否属于前部分
renderPag(1,cp);
}else if( cp<=count && cp>count - midN ){ //判断是否属于后部分
renderPag( (count - limit)+1 ,cp) ;
}else{
renderPag( (cp-midN)+1 ,cp);
}
}else if (count===limit || count limit 上翻页：暗色，删除事件 - 下翻页：亮色，点击事件
* 情况： 2) count = limit 上下翻页：暗色，删除事件
* 情况： 3) count < limit 上下翻页：暗色，删除事件
*/
if (count>limit) {
ePre.style.color = "#d2d2d2";
ePre.style.cursor = "not-allowed";
ePre.removeEventListener("click",preFn,false);
eNext.addEventListener("click",nextFn,false);
}else{
ePre.style.color = "#d2d2d2";
ePre.style.cursor = "not-allowed";
ePre.removeEventListener("click",preFn,false);
eNext.style.color = "#d2d2d2";
eNext.style.cursor = "not-allowed";
eNext.removeEventListener("click",nextFn,false);
}
} 相关推荐：
