晒一下自己的js分页代码 看看什么是菜鸟～

下面是一个csdn网友的js分页代码<body>
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
<div>内容5</div>
<div>内容6</div>
<div>内容7</div>
<div>内容8</div>
<div>内容9</div>
<div>内容10</div>
<input type=button value=上一页 onclick="aa(-1)">
<input type=button value=下一页 onclick="aa(1)">
</body>
<script>
var a = document.getElementsByTagName("div");
var n=1;//当前页function aa(x)
{
    var p = 3;
    n=n+x;
    if(n<=0)
        n=1;
    else if(n>parseInt(a.length/p))
        n=a.length/p!=0?parseInt(a.length/p)+1:parseInt(a.length/p);
    for (var i=0; i<a.length; i++)
    {
        a[i].style.display="none";
        if(i<(n*p) && i>=(n-1)*p)
            a[i].style.display="";
    }
}
window.onload=function(){aa(0)}
</script>

解决方案 »

  1.   

    使用这些,
    方使重用性也很强,如下面代码http://blog.csdn.net/xidor/archive/2008/03/20/2200597.aspx
      

  2.   

    <div id="content"></div><input type=button value=上一页 id="pre">
    <input type=button value=下一页 id="next">
    <script>
    var arr = ["内容1","内容2","内容3","内容4","内容5","内容6","内容7","内容8"];
    var n = arr.length;
    var per = 3;
    var content = document.getElementById("content");
    var page = 1;function show(){
    if(page < 1){ page = 1; }else if(page > Math.ceil(n/3)){ page = Math.ceil(n/3); }
    var p = (page - 1) * per
    content.innerHTML = "";
    for(var i = 0; i < per; i++){
    if(i + p >= n) break;
    content.innerHTML += "<div>" + arr[i + p]+ "</div>";
    }
    }show();document.getElementById("pre").onclick = function(){ page--; show(); };document.getElementById("next").onclick = function(){ page++; show(); };</script>我也写个
      

  3.   

    var i,url;
    var NowPage,AllPageCount,PageCount,AllPage;
    var BackNext;
    <%=AllPage %>
    PageCount=37;
    BackNext=5;
    if(AllPageCount%PageCount==0)
    {
    AllPage=AllPageCount/PageCount;
    }
    else
    {
    AllPage=parseInt(AllPageCount/PageCount)+1;
    }
       url=""+document.location;
       i=parseInt(url.substring(url.lastIndexOf('_')+1,url.lastIndexOf('.')));
       if(i==0)
       {
        i=1;
       }
       url=url.substring(0,url.lastIndexOf('_'));
       NowPage=i;
       function PageCountLoad()
       {
        var _html="页次:" + NowPage + "/" + AllPage +"页&nbsp;&nbsp;每页"+ PageCount + "条&nbsp;&nbsp;共" + AllPageCount + "条记录";
    if(i!=1)
    {
    _html+="&nbsp;&nbsp;<a href='" + url + "_1.html' class='PageCount'>首页</a>&nbsp;<a href='" + url + "_" + (NowPage-1) +".html' class='PageCount'>上一页</a>&nbsp;";
    }
    else
    {
    _html+="&nbsp;&nbsp;首页&nbsp;上一页&nbsp;";
    }
    var StartPage,EndPage;
    if((NowPage-BackNext)>1)
    {
    StartPage=NowPage-BackNext;
    }
    else
    {
    StartPage=1;
    }
    if((NowPage+BackNext)<=AllPage)
    {
    EndPage=NowPage+BackNext;
    }
    else
    {
    EndPage=AllPage;
    }
    var _Menu="";
    for(;StartPage<=EndPage;StartPage++)
    {
    if(StartPage!=NowPage)
    {
    _Menu +="<a href='" + url + "_" + StartPage + ".html' class='PageCount'>" + StartPage + "</a>&nbsp;";
    }
    else
    {
    _Menu +="<font color='red'>[" + StartPage + "</a>]</font>&nbsp;";
    }
    }
    _html+=_Menu;
    if(NowPage!=EndPage)
    {
    _html +="&nbsp;<a href='" + url + "_" + (NowPage+1) + ".html' class='PageCount'>下一页</a>";
    }
    _html +="&nbsp;<a href='" + url + "_" + AllPage + ".html' class='PageCount'>尾页</a>";
    document.write(_html);
       }
    怨念  我的似乎太长了。。
      

  4.   

    练练手!~~~
    <style type="text/css">
    font-size: 12px;
    a:link{color:#000000;text-decoration:none}
    a:visited{color:#000000;text-decoration:none}
    a:hover{color:#CC0000;text-decoration:none}
    </style>
    <body> 
    <div id="all"> 
    <div>内容1 </div> 
    <div>内容2 </div> 
    <div>内容3 </div> 
    <div>内容4 </div> 
    <div>内容5 </div> 
    <div>内容6 </div> 
    <div>内容7 </div> 
    <div>内容8 </div> 
    <div>内容9 </div> 
    <div>内容10 </div> 
    </div> 
    <div>一共<span id="a1" style="color:#FF0000"></span>页　当前在<span id="a2" style="color:#FF0000"></span>页　<span id="a3"></span>　<a href="#" onClick="change(--pageno)">上一页</a>　　<a href="#" onClick="change(++pageno)">下一页</a></div>
    </body> 
    <script> 
    var a = document.getElementById("all").getElementsByTagName("div"); 
    var zz =new Array(a.length) 
    for(var i=0;i <a.length;i++) 
    { zz[i]=a[i].innerHTML } 
    var pageno=1               //当前页
    var pagesize=3            //每页多少条信息
    if(zz.length%pagesize==0)
    {var  pageall =zz.length/pagesize }
    else
    {var  pageall =parseInt(zz.length/pagesize)+1}       //一共多少页  function change(e){
    if(e<1)
    { e=1;pageno=1}
    if(e>pageall)
    {e=pageall;pageno=pageall}
    document.getElementById("all").innerHTML=""
    for(var i=0;i<pagesize;i++)
     {
       var div =document.createElement("div")
       div.innerHTML=zz[(e-1)*pagesize+i]
       document.getElementById("all").appendChild(div)  
       if(zz[(e-1)*pagesize+i+1]==null)    
       break }
    var ye=""
    for(var j=1;j<=pageall;j++)
    {
      if(e==j)
      {ye=ye+"<span style='color:#FF0000'>[<a href='#' onClick='change("+j+")'>"+j+"</a>]</span>"}
      else
      {ye=ye+"<a href='#' onClick='change("+j+")'>[<a href='#' onClick='change("+j+")'>"+j+"</a>]"}
    }
    document.getElementById("a1").innerHTML=pageall
    document.getElementById("a2").innerHTML=pageno
    document.getElementById("a3").innerHTML=ye
    }
     change(1)
    </script> 
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>表格排序</title>
    </head>
    <body>
    <body>
    <div id="divPage">
        <div>内容3</div> 
        <div>内容2</div> 
        <div>内容1</div> 
        <div>内容4</div> 
        <div>内容6</div> 
        <div>内容5</div> 
        <div>内容7</div> 
        <div>内容8</div> 
        <div>内容9</div> 
        <div>内容10</div> 
    </div>
    <input type=button value="上一页" onclick="pagegrid.showPrePage();"> 
    <input type=button value="下一页" onclick="pagegrid.showNextPage();">
    </body> 
    <script> 
    function $(sId){
        return document.getElementById(sId);
    }
    //  ---------------------------------------function $Tag(sTag,oParNode){
        oParNode=oParNode?oParNode:document;
        return oParNode.getElementsByTagName(sTag);
    }
    //  ---------------------------------------function PageGrid(oDiv,nPSize){
        this.container=oDiv;
        this.curentpage=1;
        this.pagesize=nPSize;
        this.record=(function(){
                        var aEl=$Tag("div",oDiv);
                        var i,nLen=aEl.length;
                        var aResult=[];                    
                        for(i=nLen-1;i>=0;i--){
                            aResult.splice(0,0,{
                                value:aEl[i].innerHTML,
                                object:oDiv.removeChild(aEl[i])
                            });
                       }
                       return aResult;
                    })();
              
        this.pagecount=this.record.length%nPSize==0
                      ?parseInt(this.record.length/nPSize)
                      :parseInt(this.record.length/nPSize)+1;
    }
    //  ---------------------------------------PageGrid.prototype.sort=function(sOrderType){
        this.record.sort(function(el1,el2){
            if(sOrderType=="asc")
                return el1<el2?1:-1;
            else
                return el1>el2?1:-1;    
        });
    }
    //  ---------------------------------------PageGrid.prototype.showPageAt=function(nPage){
        var oDocFrag=document.createDocumentFragment();
        nPage=nPage<1?1:nPage;
        nPage=nPage>this.pagecount?this.pagecount:nPage;
        
        var nIndex=(nPage-1)*this.pagesize;
        var nLen=this.record.length;
        var count=0;
        
        this.container.innerHTML="";
        while(nIndex<nLen&&count<this.pagesize){
            oDocFrag.appendChild(this.record[nIndex].object);
            count++;
            nIndex++;
        }
        this.container.appendChild(oDocFrag);
        this.curentpage=nPage;    
    }
    //  ---------------------------------------PageGrid.prototype.showPage=function(){
        this.showPageAt(this.curentpage);
    }PageGrid.prototype.showPrePage=function(){
        if(this.curentpage>1){
            this.curentpage-=1;
            this.showPage();
        }
    }
    //  ---------------------------------------PageGrid.prototype.showNextPage=function(){
        if(this.curentpage<this.pagecount){
            this.curentpage+=1;
            this.showPage();
        }
    }
    //  ---------------------------------------var pagegrid=new PageGrid($("divPage"),3);
    pagegrid.showPage();
    </script></html>
      

  6.   

    改了下排序部分的bug
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>鏃犳爣棰樻枃妗?/title>
    </head>
    <body>
    <body>
    <div id="divPage">
        <div>内容3</div> 
        <div>内容2</div> 
        <div>内容1</div> 
        <div>内容4</div> 
        <div>内容6</div> 
        <div>内容5</div> 
        <div>内容7</div> 
        <div>内容8</div> 
        <div>内容9</div> 
        <div>内容10</div> 
    </div>
    <input type=button value="上一页" onclick="pagegrid.showPrePage();"> 
    <input type=button value="下一页" onclick="pagegrid.showNextPage();">
    <input type=button value="排　序" onclick="pagegrid.sort('asc');pagegrid.showPage()"> 
    </body> 
    <script> 
    function $(sId){
        return document.getElementById(sId);
    }
    //  ---------------------------------------function $Tag(sTag,oParNode){
        oParNode=oParNode?oParNode:document;
        return oParNode.getElementsByTagName(sTag);
    }
    //  ---------------------------------------function PageGrid(oDiv,nPSize){
        this.container=oDiv;
        this.curentpage=1;
        this.pagesize=nPSize;
        this.record=(function(){
                        var aEl=$Tag("div",oDiv);
                        var i,nLen=aEl.length;
                        var aResult=[];                    
                        for(i=nLen-1;i>=0;i--){
                            aResult.splice(0,0,{
                                value:aEl[i].innerHTML,
                                object:oDiv.removeChild(aEl[i])
                            });
                       }
                       return aResult;
                    })();
              
        this.pagecount=this.record.length%nPSize==0
                      ?parseInt(this.record.length/nPSize)
                      :parseInt(this.record.length/nPSize)+1;
    }
    //  ---------------------------------------PageGrid.prototype.sort=function(sOrderType){
        this.record.sort(function(el1,el2){
            if(sOrderType=="asc")
                return el1.value<el2.value?-1:1;
            else
                return el1.value<el2.value?1:-1;    
        });
    }
    //  ---------------------------------------PageGrid.prototype.showPageAt=function(nPage){
        var oDocFrag=document.createDocumentFragment();
        nPage=nPage<1?1:nPage;
        nPage=nPage>this.pagecount?this.pagecount:nPage;
        
        var nIndex=(nPage-1)*this.pagesize;
        var nLen=this.record.length;
        var count=0;
        
        this.container.innerHTML="";
        while(nIndex<nLen&&count<this.pagesize){
            oDocFrag.appendChild(this.record[nIndex].object);
            count++;
            nIndex++;
        }
        this.container.appendChild(oDocFrag);
        this.curentpage=nPage;    
    }
    //  ---------------------------------------PageGrid.prototype.showPage=function(){
        this.showPageAt(this.curentpage);
    }PageGrid.prototype.showPrePage=function(){
        if(this.curentpage>1){
            this.curentpage-=1;
            this.showPage();
        }
    }
    //  ---------------------------------------PageGrid.prototype.showNextPage=function(){
        if(this.curentpage<this.pagecount){
            this.curentpage+=1;
            this.showPage();
        }
    }
    //  ---------------------------------------var pagegrid=new PageGrid($("divPage"),3);
    pagegrid.showPage();
    </script></html>
      

  7.   

    6楼的代码有bug 随便点一下[1][2][3][4]  再点上一页 就回到第一页了 
    8楼的代码  点完下一页的时候 再点上一页 就什么都没了 
      

  8.   

    恩
    没有重新赋值
    function change(e)函数里面第一行加上pageno=e
      

  9.   

    3楼代码写的不错 不过有这句是多余的var content = document.getElementById("content");document.getElementById("pre").onclick = function(){ page--; show(); };document.getElementById("next").onclick = function(){ page++; show(); };
    上面这两句可改为
    pre.onclick = function(){ page--; show(); };next.onclick = function(){ page++; show(); };因为例如:<div id="content"></div> 就已经建立了一个名为content的div对象 可以直接调用
    不用重新var content = document.getElementById("content");
      

  10.   

    ie下居然不能用innerHTML把里面的div清除掉，头一次遇到
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>dddd</title>
    </head>
    <body>
    <body>
    <div id="divPage">
        <div>内容3</div> 
        <div>内容2</div> 
        <div>内容1</div> 
        <div>内容4</div> 
        <div>内容6</div> 
        <div>内容5</div> 
        <div>内容7</div> 
        <div>内容8</div> 
        <div>内容9</div> 
        <div>内容10</div> 
    </div>
    <input type=button value="上一页" onclick="pagegrid.showPrePage();"> 
    <input type=button value="下一页" onclick="pagegrid.showNextPage();">
    <input type=button value="排　序" onclick="pagegrid.sort('asc');pagegrid.showPage()"> 
    </body> 
    <script> 
    function $(sId){
        return document.getElementById(sId);
    }
    //  ---------------------------------------function $Tag(sTag,oParNode){
        oParNode=oParNode?oParNode:document;
        return oParNode.getElementsByTagName(sTag);
    }
    //  ---------------------------------------function PageGrid(oDiv,nPSize){
        this.container=oDiv;
        this.curentpage=1;
        this.pagesize=nPSize;
        this.record=(function(){
                        var aEl=$Tag("div",oDiv);
                        var i,nLen=aEl.length;
                        var aResult=[];                    
                        for(i=nLen-1;i>=0;i--){
                            aResult.splice(0,0,{
                                value:aEl[i].innerHTML,
                                object:oDiv.removeChild(aEl[i])
                            });
                       }
                       return aResult;
                    })();
              
        this.pagecount=this.record.length%nPSize==0
                      ?parseInt(this.record.length/nPSize)
                      :parseInt(this.record.length/nPSize)+1;
    }
    //  ---------------------------------------PageGrid.prototype.sort=function(sOrderType){
        this.record.sort(function(el1,el2){
            if(sOrderType=="asc")
                return el1.value<el2.value?-1:1;
            else
                return el1.value<el2.value?1:-1;    
        });
    }
    //  ---------------------------------------PageGrid.prototype.showPageAt=function(nPage){
        var oDocFrag=document.createDocumentFragment();
        nPage=nPage<1?1:nPage;
        nPage=nPage>this.pagecount?this.pagecount:nPage;
        
        var nIndex=(nPage-1)*this.pagesize;
        var nLen=this.record.length;
        var count=0;
        
        while(this.container.childNodes[0]){
           this.container.removeChild(
              this.container.childNodes[0]
           );
        }
        while(nIndex<nLen&&count<this.pagesize){
            oDocFrag.appendChild(this.record[nIndex].object);
            count++;
            nIndex++;
        }
        this.container.appendChild(oDocFrag);
        this.curentpage=nPage;    
    }
    //  ---------------------------------------PageGrid.prototype.showPage=function(){
        this.showPageAt(this.curentpage);
    }PageGrid.prototype.showPrePage=function(){
        if(this.curentpage>1){
            this.curentpage-=1;
            this.showPage();
        }
    }
    //  ---------------------------------------PageGrid.prototype.showNextPage=function(){
        if(this.curentpage<this.pagecount){
            this.curentpage+=1;
            this.showPage();
        }
    }
    //  ---------------------------------------var pagegrid=new PageGrid($("divPage"),3);
    pagegrid.showPage();
    </script></html>
      

  11.   

    总结一下一楼和3楼的<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body>
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
    <div>内容4</div>
    <div>内容5</div>
    <div>内容6</div>
    <div>内容7</div>
    <div>内容8</div>
    <div>内容9</div>
    <div>内容10</div>
    <input type=button value=上一页 onclick="aa(-1)">
    <input type=button value=下一页 onclick="aa(1)">
    </body>
    <script>
    var a = document.getElementsByTagName("div");
    var n=1;//当前页function aa(x)
    {
        var p = 3;
        n=n+x;
        if (n <= 0) n = 1;
    else if (n > Math.ceil(a.length / 3)) {
    n = Math.ceil(a.length / 3);
    }
        for (var i=0; i<a.length; i++)
        {
            a[i].style.display="none";
            if((n-1)*p<=i && i<(n*p))
                a[i].style.display="";
        }
    }
    window.onload=function(){aa(0)}
    </script>
      

  12.   

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body> 
    <div id="all"> 
    <div>内容1 </div> 
    <div>内容2 </div> 
    <div>内容3 </div> 
    <div>内容4 </div> 
    <div>内容5 </div> 
    <div>内容6 </div> 
    <div>内容7 </div> 
    <div>内容8 </div> 
    <div>内容9 </div> 
    <div>内容10 </div> 
    </div> 
    <div>一共<span id="a1" style="color:#FF0000"></span>页　当前在
    <span id="a2" style="color:#FF0000"></span>页　
    <span id="a3"></span>　<a href="#" onClick="change(--pageno)">上一页</a>　　
    <a href="#" onClick="change(++pageno)">下一页</a></div>
    </body> 
    <script> 
    var a = document.getElementById("all").getElementsByTagName("div"); 
    var zz =new Array(a.length) 
    for(var i=0;i <a.length;i++) 
    { zz[i]=a[i].innerHTML } //div的字符串数组付给zz
    var pageno=1               //当前页
    var pagesize=3            //每页多少条信息
    if(zz.length%pagesize==0)
    {var  pageall =zz.length/pagesize }
    else
    {var  pageall =parseInt(zz.length/pagesize)+1}       //一共多少页  function change(e){
    pageno=e;
    if(e<1)//如果输入页<1页
    { e=1;pageno=1}//就等于第1页 ， 当前页为1
    if(e>pageall)//如果输入页大于最大页 
    {e=pageall;pageno=pageall}//输入页和当前页都=最大页
    document.getElementById("all").innerHTML=""//全部清空
    for(var i=0;i<pagesize;i++)
     {
       var div =document.createElement("div")//建立div对象
       div.innerHTML=zz[(e-1)*pagesize+i]//建立显示元素
       document.getElementById("all").appendChild(div)//加入all中  
       if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
       break 
      }
    var ye=""
    for(var j=1;j<=pageall;j++)
    {
      if(e==j)
      {ye=ye+"<span style='color:#FF0000'>[<a href='#' onClick='change("+j+")'>"+j+"</a>]</span>"}
      else
      {ye=ye+"[<a href='#' onClick='change("+j+")'>"+j+"</a>]"}
    }
    document.getElementById("a1").innerHTML=pageall
    document.getElementById("a2").innerHTML=pageno
    document.getElementById("a3").innerHTML=ye
    }
     change(1)
    </script> 
      

  13.   

    <div id="content"></div><input type=button value=上一页 id="pre">
    <input type=button value=下一页 id="next">
    <script>
    var arr = ["内容1","内容2","内容3","内容4","内容5","内容6","内容7","内容8"];
    var n = arr.length;
    var per = 3;
    var content = document.getElementById("content");
    var page = 1;function show(){
        if(page < 1){ page = 1; }else if(page > Math.ceil(n/3)){ page = Math.ceil(n/3); }
        var p = (page - 1) * per
        content.innerHTML = "";
        for(var i = 0; i < per; i++){
            if(i + p >= n) break;
            content.innerHTML += "<div>" + arr[i + p]+ "</div>";
        }
    }show();document.getElementById("pre").onclick = function(){ page--; show(); };document.getElementById("next").onclick = function(){ page++; show(); };</script>