javascript实现的分页代码实例
摘要:javascript实现的分页代码实例:下面是一段javascript实现的分页代码,当然必须要结合后台代码实现。大家可以自行分析一下代码,希望能够给大家带来一定的帮助,代码如下:原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0520/2...
javascript实现的分页代码实例:
下面是一段javascript实现的分页代码,当然必须要结合后台代码实现。大家可以自行分析一下代码,希望能够给大家带来一定的帮助,代码如下:
<script type="text/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(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 //当前页数 }) } </script>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢