Posted in Javascript onSeptember 20, 2012
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.3water.com/js/2012/js_page/
javascript分页代码(当前页码居中)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@