手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript分页代码(当前页码居中)
javascript分页代码(当前页码居中)
摘要:复制代码代码如下:functionsetPage(opt){if(!opt.pageDivId||opt.allPageNum1){varo...

复制代码 代码如下:

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(curpageNum<showPageNum-2 || allPageNum == showPageNum){

for(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-curpageNum<lrNum && curpageNum == allPageNum-1){

for(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-curpageNum<lrNum && curpageNum == allPageNum){

for(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(curpageNum<allPageNum){

for(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;i<oA.length;i++){

oA[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在线演示 http://demo.jb51.net/js/2012/js_page/

【javascript分页代码(当前页码居中)】相关文章:

javasript实现密码的隐藏与显示

javascript瀑布流式图片懒加载实例解析与优化

理解javascript封装

Javascript实现广告页面的定时关闭

javascript清空table表格的方法

javascript实现控制的多级下拉菜单

JavaScript版代码高亮

javascript实现简单的省市区三级联动

JavaScript实现身份证验证代码

javascript实现youku的视频代码自适应宽度

精品推荐
分类导航