javascript实现简单的分页特效

前端技术 2023/09/05 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>

示例二：

<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;
 }

本文地址：https://www.stayed.cn/item/11992

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案