分享自己写的纯JS（jQuery）分页控件，也希望高手给予优化

var Paginator = {

    //by ken 

    current_page : 1,

    page_count : 1,

    display_count : 10,                                                                           

    p_container_id : "paginator",                                                                 

    

    init : function(data, func_loaddata){

       if(data && data.curpage)

           Paginator.current_page = data.curpage;                                                 

       if(data && data.size)

           Paginator.page_count = data.size;                                                      

       if(func_loaddata)

           Paginator.loadData = func_loaddata;                                                    

       if(data && data.p_container_id) 

           Paginator.p_container_id == data.p_container_id;                                       

        Paginator.gotoPage(Paginator.current_page);                                               

    },

     

    _getHtml : function(){ 

       if(Paginator.page_count <= 1)                                                              

          return "";                                                                              

       var html = new Array();                                                                    

       html.push("<div class='paginator'>");                                                      

       html.push("<ul>");                                                                         

       if(Paginator.current_page >1)                                                              

           html.push("<li><a href='javascript://' onclick='Paginator.gotoPage("+ (Paginator.current_page - 1) +");'>previous</a></li>");

       else

           html.push("<li><a href='javascript://' class='unable'>previous</a></li>");             

       if(Paginator.page_count <= Paginator.display_count)                                        

           for(var i=1; i <= Paginator.page_count + 1; i++){

               if(i == Paginator.current_page)                                                    

                   html.push("<li><a class='pagenum selected' href='javascript://'>" + i + "</a>");               

               else                                                                               

                   html.push("<li><a class='pagenum' href='javascript://' onclick='Paginator.gotoPage("+ i +");'>" + i + "</a></li>");                                                               

           }                                                                                      

                                                                                                  

       if(Paginator.page_count >= Paginator.display_count){

           var start_number = 1; end_number = Paginator.display_count;

           if(Paginator.current_page > 3){

              start_number = Paginator.current_page - 3; //使得当前页码始终在第三个位置

              if(start_number >= Paginator.page_count - Paginator.display_count)

                  start_number = Paginator.page_count - Paginator.display_count + 1;

           }

           if (start_number > 1){

              end_number = Paginator.display_count + start_number - 1;

              if( end_number >= Paginator.page_count)

                  end_number = Paginator.page_count;

           }

           //alert(end_number + "," + start_number);

           for(var k = start_number; k <= end_number; k++){

               if(k == Paginator.current_page)

                   html.push("<li><a class='pagenum selected' href='javascript://'>" + k + "</a>");

               else

                   html.push("<li><a class='pagenum' href='javascript://' onclick='Paginator.gotoPage("+ k +");'>" + k + "</a></li>");

           }

       }

       if(Paginator.current_page < Paginator.page_count)

           html.push("<li><a href='javascript://' onclick='Paginator.gotoPage("+ (Paginator.current_page + 1) +");'>next</a></li>");

       else

           html.push("<li><a href='javascript://' class='unable'>next</a></li>");

       html.push("</ul>");

       html.push("</div>");

       return html.join("\r");

    },



    loadData : function(){},



    gotoPage : function(p){

            Paginator.current_page = p;

            document.getElementById(Paginator.p_container_id).innerHTML = Paginator._getHtml();

            Paginator.loadData(Paginator.current_page);

        }

}

     /*Paginator*/

    .paginator {}

    .paginator ul {list-style:none;}

    .paginator li{float:left; margin-left:5px;}

    .paginator li a { height:20px;

                      line-height:20px;

                      padding:2px;

                      text-decoration:none;

                      text-align:center;

                      display:block;

                      border:1px solid #000;

                      color:#000;

                    }

     .paginator li .pagenum { width:20px;}

     .paginator li .selected { color:#fff; background:#000;}

     .paginator li .unable { color:#CCC; border:1px solid #ccc;}

 

使用示例

           Paginator.init({size:25, curpage:5, p_container_id:"paginator"}, 

                   function(p){

                        //此处做page number 变化后重新加载数据的操作, 参数p为当前页码          

                   });

还是给个演示地址： http://www.weatrue.com/paginator.html