javascript实现简单的分页特效

2019-11-20 11:51:09

字体：大中小

来源：转载

供稿：网友

下面是一段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>

示例二：

<html><head><style type="text/css">body{ font-size:12px;}</style></head><body><input type="button" value="分页" onclick="initializePageNav(1)"><div id="pageDir"></div><script language="JavaScript"><!--function initializePageNav(iCurrPage){ var iPageSize = 20; var iProCount = 2121; var b = ((iProCount%iPageSize)!=0); var iPageCount = parseInt(iProCount/iPageSize)+(b?1:0); if (iCurrPage > iPageCount) return false; iCurrPage = parseInt(iCurrPage); var sTemp = ""; var sTemp1 = "每页:"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>条 页数:<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +"页"; var sTemp2 = "<input type=/"text/" id=/"goPageNo/" value=/""+iCurrPage+"/" size=/"3/" /><input type=/"button/" value=/"GO/" onclick=/"initializePageNav($('goPageNo').value);/" />" if (iProCount==0) { sTemp = "<font color='#cccccc'>首页 上一页 下一页 末页</font>"; } else if (iPageCount==1) { sTemp = "<font color='#cccccc'>首页 上一页 下一页 末页</font>" } else if (iPageCount==iCurrPage) { sTemp = "<a href='Javascript:initializePageNav(1)'>首页</a> <a href='Javascript:initializePageNav("+(iPageCount-1)+")'>上一页</a> <font color='#cccccc'>下一页 末页</font>" } else if (iCurrPage==1) { sTemp = "<font color='#cccccc'>首页 上一页 </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a> <a href='Javascript:initializePageNav("+iPageCount+")'>末页</a>" } else { sTemp = "<a href='Javascript:initializePageNav(1)'>首页</a> <a href='Javascript:initializePageNav("+(iCurrPage-1)+")'>上一页</a> <a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>下一页</a> <a href='Javascript:initializePageNav("+(iPageCount)+")'>末页</a>" } $("pageDir").innerHTML = sTemp +" "+ sTemp2 + " " + sTemp1 ; CollectGarbage();}function $(o){ return document.getElementById(o);}initializePageNav(1)//--></script></body></html>

示例三：

实现的效果是：上一页、第一页、…（上n个页码）、n个页码、…（下n个页码）、最后一页、下一页。n可以是奇数也可以是偶数，一般都喜欢取奇数

//总页数，当前页数，跳转地址，第一页和最后一页之间显示的页码数量function pageBar(tp,cp,url,pn){  var str = ‘<ul class=”page”>';  if(tp>1 && cp>1){   var prev = cp-1;   str += ‘<li><a class=”prev” title=”上一页” href=”javascript:goPage(‘+prev+‘,/”+url+‘/');”><span>上一页</span></a></li> ‘;  }else{   str += ‘<li><a class=”prev” title=”上一页” href=”javascript:void(0);”><span>上一页</span></a></li> ‘;  }  if(tp>1){   //第一页   if(cp==1){    str +=‘<li class=”current”><a href=”javascript:goPage(1,/”+url+‘/');”><span>1</span></a></li> ‘;   }else{    str +=‘<li><a href=”javascript:goPage(1,/”+url+‘/');”><span>1</span></a></li> ‘;   }   if(tp>2){    var pnh = Math.floor(pn/2);    //循环开始页码    var s = cp-pnh;    if(s<=1){     s = 2;    }    //循环结束页码    var e = cp+pnh;    if(e>=tp){     e = tp-1;    }    if(s<=(1+pnh)){     if(tp>(pn+2)){      e = s+(pn-1);      if(e>=tp){       e = tp-1;      }     }else{      s = 2;     }    }    if(e>=(tp-pnh)){     if(tp>(pn+2)){      s = e-(pn-1);      if(s<=1){       s = 2;      }     }else{      e = tp-1;     }    }    if(e<s){     e = s;    }    //第一页后的多页跳转    if(s>2){     var sp = cp-pn;     if(sp<1){      sp=1;     }     str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,/”+url+‘/');”><span>…</span></a></li> ‘;    }    for(var i=s;i<=e;i++){     if(i==cp){      str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,/”+url+‘/');”><span>'+i+‘</span></a></li> ‘;     }else{      str += ‘<li><a href=”javascript:goPage(‘+i+‘,/”+url+‘/');”><span>'+i+‘</span></a></li> ‘;     }    }    //最后一页前的多页跳转    if(e < (tp-1)){     var ep = cp+pn;     if(ep>tp){      ep=tp;     }     str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,/”+url+‘/');”><span>…</span></a></li> ‘;    }   }   //最后一页   if(cp==tp){    str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,/”+url+‘/');”><span>'+tp+‘</span></a></li> ‘;   }else{    str +=‘<li><a href=”javascript:goPage(‘+tp+‘,/”+url+‘/');”><span>'+tp+‘</span></a></li> ‘;   }  }else{   str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘;  }  if(tp>1 && cp<tp){   var next = cp+1;   str += ‘<li><a class=”next” title=”下一页” href=”javascript:goPage(‘+next+‘,/”+url+‘/');”><span>下一页</span></a></li>';  }else{   str += ‘<li><a class=”next” title=”下一页” href=”javascript:void(0);”><span>下一页</span></a></li>';  }  str += ‘</ul>';  return str; } //跳转页码，跳转地址 function goPage(cp,url){  window.location.href = url+cp; }

上一篇：js实现将选中值累加到文本框的方法

下一篇：JavaScript实现网站访问次数统计代码