你的位置:首页 > Java教程

[Java教程]javascript实现的分页代码实例


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>

原文地址是:http://www.51texiao.cn/javascriptjiaocheng/2015/0520/2009.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8600