Based on the JS paging control to achieve a simple beautiful imitation Taobao page button effect _javascript skills

Latest Version Code please go to Https://github.com/pgkk/kkpager

Online Test Link: http://pgkk.github.io/kkpager/example/pager_test.html

Pagination Button thought:

1, less than 9 pages, all show

2, greater than 9 pages, 1, 2 page display, the middle page is the center of the current page, before and after each left two page numbers

The appendix contains a complete example of the compression package download. has been updated to the latest version

First look at the effect of the picture:

01 Input Box Focus effect

02 Effect

Imitation Taobao pagination button effect control Kkpager JS code:

JS Code

var Kkpager = {//divid Pagerid: ' Div_pager ',//Current page number pno:1,//Total number total:1,//Total data bar totalrecords:0,//Show Total number of pages isshowtotalpage:true,//whether to display total records isshowtotalrecords:true,//Whether display page number jump input box isgopage:true,//link front Hrefformer : ',//link tail Hreflatter: ',/**** link algorithm ****/getlink:function (n) {//Here the algorithm applies for example://hrefformer=http://www.xx.com/new s/20131212//hreflatter=.html//So the first page (1th page) is http://www.xx.com/news/20131212.html//2nd is http://www.xx.com/news/ 
20131212_2.html//Nth page is 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 ') when the//Jump box gets input focus; 
$ (' #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:f when the//Jump box loses input focusUnction () {settimeout (function () {var Btngo = $ (' #btn_go '); 
$ (' #go_page_wrap '). CSS (' width ', ' 44px '); 
Btngo.animate ({left: '-=44 '}, the function () {$ (' #btn_go '). CSS (' left ', ' 0px '); 
$ (' #btn_go '). Hide (); 
$ (' #go_page_wrap '). CSS (' Border-color ', ' #DFDFDF '); 
}); 
},400); 
},//Jump Box page Jump 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 
///Here you can change window.open window.location = This.getlink (n) as needed; 
//Paging Button control initialization init:function (config) {//Assignment 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 = Config.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;} 
Verify 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; 
},//RAW content page control HTML generpagehtml:function () {if (!this.inited) {return; 
var str_prv= ', str_next= '; 
if (THIS.HASPRV) {Str_prv = ' <a href= ' +this.getlink (THIS.PRV) + ' "title=" prev "> Prev </a>"; 
}else{STR_PRV = ' <span class= ' disabled ' > Prev </span> '; } if (This.haSnext) {str_next = ' <a href= ' +this.getlink (this.next) + ' "title=" next Page "> Next </a>"; 
}else{str_next = ' <span class= ' disabled ' > next page </span> '; 
var str = '; 
var dot = ' <span>...</span> '; 
var total_info= '; 
if (This.isshowtotalpage | | this.isshowtotalrecords) {total_info = ' <span class= ' normalsize ' > co '; 
if (this.isshowtotalpage) {total_info + = this.total+ ' page '; 
if (this.isshowtotalrecords) {total_info = '  /  '; 
} if (this.isshowtotalrecords) {total_info + = this.totalrecords+ ' piece of data '; 
} Total_info + = ' </span> '; 
} var gopage_info = '; if (this.isgopage) {gopage_info = '   go to <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, XXFarEastFont-Arial, Sans-serif;text-align:center;bordEr:0px;background-color: #0063DC; color: #FFF;p osition:absolute;left:0px;top:-1px;display:none; "value=" OK "/>" + ' <input type= ' text ' id= ' btn_go_input ' onfocus= ' kkpager.focus_gopage () ' onkeypress= ' if (event.keycode<48 | | EVENT.KEYCODE&GT;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> page"; //Paging if (This.total <= 8) {for (Var i=1;i<=this.total;i++) {if (This.pno = i) {str = ' <span class= ' Curr ' & gt; ' 
+i+ ' </span> '; 
}else{str = ' <a href= ' +this.getlink (i) + ' title= ' "+i+ ' page" > ' +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+ ' page" > ' +i+ ' </a> '; 
} str + + dot; }else{str = ' <a href= ' +this.getlink (1) + ' "title=" 1th page ">1</a>'; 
STR + + ' <a href= ' +this.getlink (2) + ' title= ' 2nd page ' >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+ ' page" > ' +i+ ' </a> '; 
} if (end!= this.total) {str = dot; 
}} str = " " +STR_PRV + str + str_next + total_info + gopage_info; 
$ ("#" +this.pagerid). html (str);  } 
};

HTML Calling code:

HTML code

<div id= "Div_pager" ></div> 
<script type= "Text/javascript" > 
//Live Ingredient page Control 
Kkpager.init ({ 
pno: ' ${p.pageno} ', 
//Total number 
: ' ${p.totalpage} ', 
//Total data bar 
totalrecords: ' ${p.totalcount} ', 
//Link front 
hrefformer: ' ${hrefformer} ', 
//link tail 
hreflatter: ' ${hreflatter} ' 
}; 
Kkpager.generpagehtml (); 

The above is the required parameter in the example, page number, total number of pages, total records These are the values that are to be associated with the pager object to get the server, and optional parameters: Pagerid, Isshowtotalpage, Isshowtotalrecords, Isgopage, GetLink

Note that the link algorithm yo, the following is the default link algorithm (this getlink method can also be used as config parameter):

JS Code

/**** default link algorithm ****/ 
getlink:function (n) { 
//the algorithm here is applicable for example: 
//hrefformer=http://www.xx.com/news/20131212 
//hreflatter=.html 
//So the first page (1th page) is http://www.xx.com/news/20131212.html 
//2nd is http://www.xx.com/ news/20131212_2.html 
//nth page is http://www.xx.com/news/20131212_n.html 
if (n = = 1) {return 
This.hrefformer + This.hreflatter; 
} else{return 
This.hrefformer + ' _ ' + n + this.hreflatter; 
} 

CSS code:

#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; 
}

Effect Chart:

1, no data or only one page of data effect

2, when there are multiple pages when the effect

3, 5th page effect

4, 6th page effect (Paging effect 2)

5, 17th page effect (near end effect)

6, End effect

7, input box focus effect

Finally note that to use, please modify the paging to get links when the algorithm, otherwise not applicable yo

Inside the input box I wrote the ID dead, style is also written when the line style, too lazy to extract out, the impact is not large, you reader to use their own repair, hehe

The above is a small set for you to introduce based on the JS page control to achieve a simple beautiful imitation Taobao page button effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!