javascript實現(xiàn)簡單的分頁特效

更新時間：2015年08月12日 09:25:39 投稿：hebedich

下面給大家匯總的幾個javascript實現(xiàn)的分頁代碼，當然必須要結合后臺代碼實現(xiàn)。大家可以自行分析一下代碼，希望能夠給大家?guī)硪欢ǖ膸椭?/div>

下面是一段javascript實現(xiàn)的分頁代碼，當然必須要結合后臺代碼實現(xiàn)。大家可以自行分析一下代碼，希望能夠給大家?guī)硪欢ǖ膸椭?代碼如下:

<script type="text/javascript">
function setPage(opt)
{ 
 if(!opt.pageDivId || opt.allPageNum < opt.curpageNum || opt.allPageNum < opt.showPageNum)
 {
  return false
 } 
 var allPageNum=opt.allPageNum; //總的頁數(shù) 
 var showPageNum=opt.showPageNum; //顯示的頁數(shù) 
 var curpageNum=opt.curpageNum; // 當前的頁數(shù) 
 var pageDIvBox=document.getElementById(opt.pageDivId); 
 //左邊或右邊顯示頁碼的個數(shù) 
 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
 { 
  //倒數(shù)第一頁的處理 
  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); 
 //清空頁數(shù)顯示 
 pageDIvBox.innerHTML = ''; 
 setPage({ 
  pageDivId:'page', 
  showPageNum:5, //顯示的個數(shù) 
  allPageNum:10, //總頁數(shù) 
  curpageNum:sHref //當前頁數(shù) 
 }) 
 } 
} 
} 
window.onload=function()
{ 
 setPage({ 
  pageDivId:'page', 
  showPageNum:5, //顯示的個數(shù) 
  allPageNum:10, //總頁數(shù) 
  curpageNum:1 //當前頁數(shù) 
 }) 
} 
</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>條 頁數(shù):<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>

示例三：

實現(xiàn)的效果是：上一頁、第一頁、…（上n個頁碼）、n個頁碼、…（下n個頁碼）、最后一頁、下一頁。n可以是奇數(shù)也可以是偶數(shù)，一般都喜歡取奇數(shù)

//總頁數(shù)，當前頁數(shù)，跳轉地址，第一頁和最后一頁之間顯示的頁碼數(shù)量
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);

    //循環(huán)開始頁碼
    var s = cp-pnh;
    if(s<=1){
     s = 2;
    }

    //循環(huán)結束頁碼
    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;
 }

您可能感興趣的文章: