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