美娱国际:javascript分页代码(当前页码居中)

标签:公司介绍    日期:2019-01-02 13:23    录入:美娱国际平台注册    浏览:

  

[javascript分页]javascript分页代码(当前页码居中)

   代码如下:
  
function setPage(opt){  
if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum){return false};  
var allPageNum = opt.allPageNum; //总的页数  
var showPageNum = opt.showPageNum; //显示的页数  
var curpageNum = opt.curpageNum; // 当前的页数  
var pageDIvBox = document.getElementById(opt.pageDivId);  
//左边或右边显示页码的个数  
var lrNum = Math.floor(showPageNum/2);  
if(curpageNum>1){  
var oA = document.createElement('a');  
oA.href='#1';  
oA.innerHTML = '首页'  
pageDIvBox.appendChild(oA);  
}  
if(curpageNum>1){  
var oA = document.createElement('a');  
oA.href='#'+(curpageNum-1);  
oA.innerHTML = '上一页'  
pageDIvBox.appendChild(oA);  
}  
if(curpageNumfor(var i=1;i<=showPageNum;i++){  
var oA = document.createElement('a');  
oA.href = '#'+i;  
if(curpageNum==i){  
oA.innerHTML = i;  
}else{  
oA.innerHTML = "[" + i + "]";  
}  
pageDIvBox.appendChild(oA);  
}  
}else{  
//倒数第一页的处理  
if(allPageNum-curpageNumfor(var i=1;i<=showPageNum;i++){  
console.log((curpageNum - showPageNum + i));  
var oA = document.createElement('a');  
oA.href 美娱国际娱乐 = '#'+ (curpageNum - (showPageNum-1) + i);  
if(curpageNum == (curpageNum - (showPageNum-1) + i)){  
oA.innerHTML = (curpageNum - (showPageNum-1) + i)  
}else{  
oA.innerHTML = '['+(curpageNum - (showPageNum-1) + i)+']'  
}  
pageDIvBox.appendChild(oA);  
}  
}  
//最后一页的处理  
else if(allPageNum-curpageNumfor(var i=1;i<=showPageNum;i++){  
console.log((curpageNum - showPageNum + i));  
var oA = document.createElement('a');  
oA.href = '#'+ (curpageNum - showPageNum + i);  
if(curpageNum == (curpageNum - showPageNum + i)){  
oA.innerHTML = (curpageNum - showPageNum + i)  
}else{  
oA.innerHTML = '['+(curpageNum-showPageNum + i)+']'  
}  
pageDIvBox.appendChild(oA);  
}  
}else{  
for(var i=1;i<=showPageNum;i++){  
var oA = document.createElement('a');  
oA.href = '#'+ (curpageNum - (showPageNum-lrNum) + i);  
if(curpageNum == (curpageNum - (showPageNum-lrNum) + i)){  
oA.innerHTML = (curpageNum - (showPageNum-lrNum) + i)  
}else{  
oA.innerHTML = '['+(curpageNum - (showPageNum-lrNum) + i)+']'  
}  
pageDIvBox.appendChild(oA);  
}  
}  
}  
if(curpageNumfor(var i=1;i<=2;i++){  
if(i==1){  
var oA = document.createElement('a');  
oA.href='#'+(parseInt(curpageNum)+1);  
oA.innerHTML = '下一页'  
}else{  
var oA = document.createElement('a');  
oA.href='#'+allPageNum;  
oA.innerHTML = '尾页'  
}  
pageDIvBox.appendChild(oA);  
}  
}  
var oA = document.getElementsByTagName('a');  
//给页码添加点击事件  
for(var i=0;ioA[i].onclick = function(){  
//当前点的页码  
var sHref = this.getAttribute('href').substring(1);  
//清空页数显示  
pageDIvBox.innerHTML = '';  
setPage({  
pageDivId:'page',  
showPageNum:5, //显示的个数  
allPageNum:10, //总页数  
curpageNum:sHref //当前页数  
})  
}  
}  
}  
window.onload = function(){  
setPage({  
pageDivId:'page',  
showPageNum:5, //显示的个数  
allPageNum:10, //总页数  
curpageNum:1 //当前页数  
})  
}  
  
昨天看了妙味课堂的 分页视频教程,今天自己参照其思路,自己写了下,并且自己新增了一个‘显示页码个数'的属性 ‘showPageNum';  
  
下面对关键的几个地方做个总结:  
  
1.点击的当前页码需要在显示的页码中居中;  
无论是显示 3页 5页 7页 9页…… 等等  
当前页要居中,可以推出一个公式  
用显的页码个数除以2 再取整,就可以得到左右需要显的页码个数。这个对后面的分页判断很有用  
var lrNum = Math.floor(showPageNum/2);  
  
2.获取页码  
this.getAttribute('href') 用它可以得到相对路径;this.href 用它只能得到绝对路径  
  
DEMO在线演示

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
相关文章阅读
点击右上角的分享按钮即可收藏美娱国际平台注册 随时随地与好友一起分享精彩内容噢