漂亮！Javascript代码模仿淘宝宝贝搜索结果的分页显示效果

分页按钮思想：
1、少于9页，全部显示
2、大于9页，1、2页显示，中间页码当前页为中心，前后各留两个页码
先看效果图：
01输入框焦点效果

02效果


模仿淘宝的分页按钮效果控件kkpager  JS代码： 

var kkpager = {
        //divID
        pagerid : \'div_pager\',
        //当前页码
        pno : 1,
        //总页码
        total : 1,
        //总数据条数
        totalRecords : 0,
        //是否显示总页数
        isShowTotalPage : true,
        //是否显示总记录数
        isShowTotalRecords : true,
        //是否显示页码跳转输入框
        isGoPage : true,
        //链接前部
        hrefFormer : \'\',
        //链接尾部
        hrefLatter : \'\',
        /****链接算法****/
        getLink : function(n){
            //这里的算法适用于比如：
            //hrefFormer=http://www.xx.com/news/20131212
            //hrefLatter=.html
            //那么首页（第1页）就是http://www.xx.com/news/20131212.html
            //第2页就是http://www.xx.com/news/20131212_2.html
            //第n页就是http://www.xx.com/news/20131212_n.html
            if(n == 1){
                return this.hrefFormer + this.hrefLatter;
            }else{
                return this.hrefFormer + \'_\' + n + this.hrefLatter;
            }
        },
        //跳转框得到输入焦点时
        focus_gopage : function (){
            var btnGo = $(\'#btn_go\');
            $(\'#btn_go_input\').attr(\'hideFocus\',true);
            btnGo.show();
            btnGo.css(\'left\',\'0px\');
            $(\'#go_page_wrap\').css(\'border-color\',\'#6694E3\');
            btnGo.animate({left: \'+=44\'}, 50,function(){
                //$(\'#go_page_wrap\').css(\'width\',\'88px\');
            });
        },
        
        //跳转框失去输入焦点时
        blur_gopage : function(){
            setTimeout(function(){
                var btnGo = $(\'#btn_go\');
                //$(\'#go_page_wrap\').css(\'width\',\'44px\');
                btnGo.animate({
                    left: \'-=44\'
                  }, 100, function() {
                      $(\'#btn_go\').css(\'left\',\'0px\');
                      $(\'#btn_go\').hide();
                      $(\'#go_page_wrap\').css(\'border-color\',\'#DFDFDF\');
                  });
            },400);
        },
        //跳转框页面跳转
        gopage : function(){
            var str_page = $("#btn_go_input").val();
            if(isNaN(str_page)){
                $("#btn_go_input").val(this.next);
                return;
            }
            var n = parseInt(str_page);
            if(n < 1 || n >this.total){
                $("#btn_go_input").val(this.next);
                return;
            }
            //这里可以按需改window.open
            window.location = this.getLink(n);
        },
        //分页按钮控件初始化
        init : function(config){
            //赋值
            this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno);
            this.total = isNaN(config.total) ? 1 : parseInt(config.total);
            this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords);
            if(config.pagerid){this.pagerid = pagerid;}
            if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;}
            if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;}
            if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;}
            this.hrefFormer = config.hrefFormer || \'\';
            this.hrefLatter = config.hrefLatter || \'\';
            if(config.getLink && typeof(config.getLink) == \'function\'){this.getLink = config.getLink;}
            //验证
            if(this.pno < 1) this.pno = 1;
            this.total = (this.total <= 1) ? 1: this.total;
            if(this.pno > this.total) this.pno = this.total;
            this.prv = (this.pno<=2) ? 1 : (this.pno-1);
            this.next = (this.pno >= this.total-1) ? this.total : (this.pno + 1);
            this.hasPrv = (this.pno > 1);
            this.hasNext = (this.pno < this.total);
            
            this.inited = true;
        },
        //生成分页控件Html
        generPageHtml : function(){
            if(!this.inited){
                return;
            }
            
            var str_prv=\'\',str_next=\'\';
            if(this.hasPrv){
                str_prv = \'<a href="\'+this.getLink(this.prv)+\'" title="上一页">上一页</a>\';
            }else{
                str_prv = \'<span class="disabled">上一页</span>\';
            }
            
            if(this.hasNext){
                str_next = \'<a href="\'+this.getLink(this.next)+\'" title="下一页">下一页</a>\';
            }else{
                str_next = \'<span class="disabled">下一页</span>\';
            }
            
            
            var str = \'\';
            var dot = \'<span>...</span>\';
            var total_info=\'\';
            if(this.isShowTotalPage || this.isShowTotalRecords){
                total_info = \'<span class="normalsize">共\';
                if(this.isShowTotalPage){
                    total_info += this.total+\'页\';
                    if(this.isShowTotalRecords){
                        total_info += \'&nbsp;/&nbsp;\';
                    }
                }
                if(this.isShowTotalRecords){
                    total_info += this.totalRecords+\'条数据\';
                }
                
                total_info += \'</span>\';
            }
            
            var gopage_info = \'\';
            if(this.isGoPage){
                gopage_info = \'&nbsp;转到<span id="go_page_wrap" style="display:inline-block;width:44px;height:18px;border:1px solid #DFDFDF;margin:0px 1px;padding:0px;position:relative;left:0px;top:5px;">\'+
                    \'<input type="button" id="btn_go" onclick="kkpager.gopage();" style="width:44px;height:20px;line-height:20px;padding:0px;font-family:arial,宋体,sans-serif;text-align:center;border:0px;background-color:#0063DC;color:#FFF;position:absolute;left:0px;top:-1px;display:none;" value="确定" />\'+
                    \'<input type="text" id="btn_go_input" onfocus="kkpager.focus_gopage()" onkeypress="if(event.keyCode<48 || event.keyCode>57)return false;" onblur="kkpager.blur_gopage()" style="width:42px;height:16px;text-align:center;border:0px;position:absolute;left:0px;top:0px;outline:none;" value="\'+this.next+\'" /></span>页\';
            }
            
            //分页处理
            if(this.total <= 8){
                for(var i=1;i<=this.total;i++){
                    if(this.pno == i){
                        str += \'<span class="curr">\'+i+\'</span>\';
                    }else{
                        str += \'<a href="\'+this.getLink(i)+\'" title="第\'+i+\'页">\'+i+\'</a>\';
                    }
                }
            }else{
                if(this.pno <= 5){
                    for(var i=1;i<=7;i++){
                        if(this.pno == i){
                            str += \'<span class="curr">\'+i+\'</span>\';
                        }else{
                            str += \'<a href="\'+this.getLink(i)+\'" title="第\'+i+\'页">\'+i+\'</a>\';
                        }
                    }
                    str += dot;
                }else{
                    str += \'<a href="\'+this.getLink(1)+\'" title="第1页">1</a>\';
                    str += \'<a href="\'+this.getLink(2)+\'" title="第2页">2</a>\';
                    str += dot;
                    
                    var begin = this.pno - 2;
                    var end = this.pno + 2;
                    if(end > this.total){
                        end = this.total;
                        begin = end - 4;
                        if(this.pno - begin < 2){
                            begin = begin-1;
                        }
                    }else if(end + 1 == this.total){
                        end = this.total;
                    }
                    for(var i=begin;i<=end;i++){
                        if(this.pno == i){
                            str += \'<span class="curr">\'+i+\'</span>\';
                        }else{
                            str += \'<a href="\'+this.getLink(i)+\'" title="第\'+i+\'页">\'+i+\'</a>\';
                        }
                    }
                    if(end != this.total){
                        str += dot;
                    }
                }
            }
            
            str = "&nbsp;"+str_prv + str + str_next  + total_info + gopage_info;
            $("#"+this.pagerid).html(str);
        }
};

html调用代码：

<div id="div_pager"></div>  
<script type="text/javascript">  
//生成分页控件   
kkpager.init({   
    pno : \'${p.pageNo}\',   
    //总页码   
    total : \'${p.totalPage}\',   
    //总数据条数   
    totalRecords : \'${p.totalCount}\',   
    //链接前部   
    hrefFormer : \'${hrefFormer}\',   
    //链接尾部   
    hrefLatter : \'${hrefLatter}\'   
});   
kkpager.generPageHtml();   
</script>  

以上是示例中是必传参数，页码、总页数、总记录数这些是要根据获取服务端pager对象当相关值，还有可选的参数：pagerid、isShowTotalPage、isShowTotalRecords、isGoPage、getLink

注意链接算法哟，以下是默认链接算法（这个getLink方法也可以作为config参数）： 

/****默认链接算法****/
getLink : function(n){
    //这里的算法适用于比如：
    //hrefFormer=http://www.xx.com/news/20131212
    //hrefLatter=.html
    //那么首页（第1页）就是http://www.xx.com/news/20131212.html
    //第2页就是http://www.xx.com/news/20131212_2.html
    //第n页就是http://www.xx.com/news/20131212_n.html
    if(n == 1){
        return this.hrefFormer + this.hrefLatter;
    }else{
        return this.hrefFormer + \'_\' + n + this.hrefLatter;
    }
}

CSS文件：

#div_pager{
    clear:both;
    height:30px;
    line-height:30px;
    margin-top:20px;
    color:#999999;
}

#div_pager a{
    padding:4px 8px;
    margin:10px 3px;
    font-size:12px;
    border:1px solid #DFDFDF;
    background-color:#FFF;
    color:#9d9d9d;
    text-decoration:none;
}

#div_pager span{
    padding:4px 8px;
    margin:10px 3px;
    font-size:14px;
}

#div_pager span.disabled{
    padding:4px 8px;
    margin:10px 3px;
    font-size:12px;
    border:1px solid #DFDFDF;
    background-color:#FFF;
    color:#DFDFDF;
}

#div_pager span.curr{
    padding:4px 8px;
    margin:10px 3px;
    font-size:12px;
    border:1px solid #FF6600;
    background-color:#FF6600;
    color:#FFF;
}

#div_pager a:hover{
    background-color:#FFEEE5;
    border:1px solid #FF6600;
}

#div_pager span.normalsize{
    font-size:12px;
}

效果图：
1、没有数据或只有一页数据时效果



2、有多页时当效果



3、第5页效果



4、第6页效果（分页效果2）



5、第17页效果（接近尾页效果）



6、尾页效果



7、输入框焦点效果



最后注意，若要使用，使用时请修改分页获取链接当算法，不然不适用哟
里面输入框我把ID写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修改一下，呵呵 。