分页按钮思想：
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 = '上一页'; }else{ str_prv = '上一页'; } if(this.hasNext){ str_next = '下一页'; }else{ str_next = '下一页'; } var str = ''; var dot = '...'; var total_info=''; if(this.isShowTotalPage || this.isShowTotalRecords){ total_info = '共'; if(this.isShowTotalPage){ total_info += this.total+'页'; if(this.isShowTotalRecords){ total_info += ' / '; } } if(this.isShowTotalRecords){ total_info += this.totalRecords+'条数据'; } total_info += ''; } var gopage_info = ''; if(this.isGoPage){ gopage_info = ' 转到'+ ''+ '页'; } //分页处理 if(this.total <= 8){ for(var i=1;i<=this.total;i++){ if(this.pno == i){ str += ''+i+''; }else{ str += ''+i+''; } } }else{ if(this.pno <= 5){ for(var i=1;i<=7;i++){ if(this.pno == i){ str += ''+i+''; }else{ str += ''+i+''; } } str += dot; }else{ str += '1'; str += '2'; 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 += ''+i+''; }else{ str += ''+i+''; } } if(end != this.total){ str += dot; } } } str = " "+str_prv + str + str_next + total_info + gopage_info; $("#"+this.pagerid).html(str); }}; html调用代码：
以上是示例中是必传参数，页码、总页数、总记录数这些是要根据获取服务端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写死了，样式也是写当行内样式，懒得提取出来了，影响不大，各位看官若要用自己再修改一下，呵呵 。