javascript 实现ajax调用下的动态分页脚本

一年前花了两天的时间写的，最近又有用到了，顺便在这里分享一下。

 分页效果如：

 

调用 GbookPaging(PageNum) 方法用来跳转到那一页，返回对应分页的html。

// JScript File//by(pengpeng 2007.9)

function GbookPaging(PageNum)
{
var Page="";
Page+=" <div><div  class=\"page\"><ul>";
Page+=" <li class=\"long\"><a  href=\"javascript:void(0)\"";
Page+="  onclick=\"GbookGoPage(1)\">首页</a></li>";
if(PageNum<=10)
{
        if (pageIndexid==1)  //只显示下一页
        {
                Page+="<li >1</li>";
                 for(var j=2;j<=PageNum;j++)
                 {
                    Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + j+")\">";
                    Page+=j;
                    Page+="</a></li>";

                 }         
                Page+="<li class=\"long\"><a href=\"javascript:void(0)\" onclick=\"GbookGoPage("+(pageIndexid+1)+")\">";
                Page+="下一页</a></li></ul></div>";  
        }
        else if (pageIndexid==PageNum)//只显示上一页
        {
             Page+="<li class=\"long\"><a href=\"javascript:void(0)\" onclick=\"GbookGoPage("+(pageIndexid-1)+")\">";
             Page+="上一页</a></li>";
             for(var k=1;k<PageNum;k++)
                     {
                        Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + k+")\">";
                        Page+=k;
                        Page+="</a></li>";

                     }     
             Page+="<li>"+PageNum+"</li></ul></div>";

        }
        else//都显示
        {
            Page+="<li class=\"long\"><a href=\"javascript:void(0)\" onclick=\"GbookGoPage("+(pageIndexid-1)+")\">";
            Page+="上一页</a></li>";
                for(var m=1;m<pageIndexid;m++)
                {
                                Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + m+")\">";
                                Page+=m;
                                Page+="</a></li>";
                }
            Page+="<li>";
            Page+=pageIndexid;
            Page+="</li>";
                for(var n=pageIndexid+1;n<=PageNum;n++)
                {
                               Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + n+")\">";
                                Page+=n;
                                Page+="</a></li>"; 
                }
                Page+=" <li class=\"long\"><a href=\"javascript:void(0)\"";
                Page+="  onclick=\"GbookGoPage("+(pageIndexid+1)+")\">下一页</a></li>";
                Page+="</ul></div>";   
        } 

}
else     //页数超过十页的时候
{
      if(pageIndexid==1)   // 只显示上一页
       {
           Page+="<li >1</li>";
           
             for(var j=2;j<=7;j++)
             {
                Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + j+")\">";
                Page+=j;
                Page+="</a></li>";

             } 
             
             Page+="";  
             for(var k=PageNum-1;k<=PageNum;k++) 
             {
                Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" +k+")\">";
                Page+=k;
                Page+="</a></li>";
          
             }  
               
            Page+="<li class=\"long\"><a href=\"javascript:void(0)\" onclick=\"GbookGoPage("+(pageIndexid+1)+")\">";
            Page+="下一页</a></li></ul></div>";  
            
        }
      else if(pageIndexid==PageNum)//只显示下一页
        {
         Page+="<li class=\"long\"><a href=\"javascript:void(0)\" onclick=\"GbookGoPage("+(pageIndexid-1)+")\">";
         Page+="上一页</a></li>";
         Page+="";
         for(var k=PageNum-9;k<PageNum;k++)
                 {
                    Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + k+")\">";
                    Page+=k;
                    Page+="</a></li>";

                 }     
         Page+="<li>"+PageNum+"</li></ul></div>";
        }
         //=========上下页都有的
       else if(pageIndexid<=3 && pageIndexid!=1)
       {
        Page+="<li class=\"long\"><a href=\"javascript:void(0)\" onclick=\"GbookGoPage("+(pageIndexid-1)+")\">";
        Page+="上一页</a></li>";
            for(var m=1;m<pageIndexid;m++)
            {
                            Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + m+")\">";
                            Page+=m;
                            Page+="</a></li>";
            }
        Page+="<li>";
        Page+=pageIndexid;
        Page+="</li>";
            for(var n=pageIndexid+1;n<=7;n++)
            {
                           Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + n+")\">";
                            Page+=n;
                            Page+="</a></li>"; 
            }
            Page+="";
             for(var k=PageNum-1;k<=PageNum;k++) 
             {
                Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" +k+")\">";
                Page+=k;
                Page+="</a></li>";
             }   
            Page+=" <li class=\"long\"><a href=\"javascript:void(0)\"";
            Page+="  onclick=\"GbookGoPage("+(pageIndexid+1)+")\">下一页</a></li>";
            Page+="</ul></div>";   
       }
       else if(pageIndexid!=PageNum&&pageIndexid>=PageNum-3)
       {
        Page+="<li class=\"long\"><a href=\"javascript:void(0)\" onclick=\"GbookGoPage("+(pageIndexid-1)+")\">";
        Page+="上一页</a></li>";
        Page+="";
        for(var m=PageNum-9;m<pageIndexid;m++)
            {
                            Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + m+")\">";
                            Page+=m;
                            Page+="</a></li>";
            }
        Page+="<li>";
        Page+=pageIndexid;
        Page+="</li>";
            for(var n=pageIndexid+1;n<=PageNum;n++)
            {
                           Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + n+")\">";
                            Page+=n;
                            Page+="</a></li>"; 
            }
            Page+=" <li class=\"long\"><a href=\"javascript:void(0)\"";
            Page+="  onclick=\"GbookGoPage("+(pageIndexid+1)+")\">下一页</a></li>";
            Page+="</ul></div>"; 
       }
       else
       {
       Page+="<li class=\"long\"><a href=\"javascript:void(0)\" onclick=\"GbookGoPage("+(pageIndexid-1)+")\">";
        Page+="上一页</a></li>";
        Page+="";
        for(var m=pageIndexid-3;m<pageIndexid;m++)
            {
                            Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + m+")\">";
                            Page+=m;
                            Page+="</a></li>";
            }
        Page+="<li>";
        Page+=pageIndexid;
        Page+="</li>";
            for(var n=pageIndexid+1;n<=pageIndexid+3;n++)
            {
                           Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" + n+")\">";
                            Page+=n;
                            Page+="</a></li>"; 
            }
            Page+="";
            for(var k=PageNum-1;k<=PageNum;k++) 
             {
                Page+=" <li><a href=\"javascript:void(0)\"  onclick=\"GbookGoPage(" +k+")\">";
                Page+=k;
                Page+="</a></li>";
             } 
            Page+=" <li class=\"long\"><a href=\"javascript:void(0)\"";
            Page+="  onclick=\"GbookGoPage("+(pageIndexid+1)+")\">下一页</a></li>";
            Page+="</ul></div>"; 
       }
       
}

return Page;
}

 

同样的c#版的我也写过一个：重写的一个带分页的 repeater和一个通用的分页