Paging is the front end often used by a very practical knowledge point, today free to nothing, do a little demo, although the appearance, compared to ugly, ha haha, but this is the core of the paging idea are in, hoping to give some inspiration to a small partner. Can be copied directly in the editor to run.
<! DOCTYPE html>a{margin:5px; } </style> //using the notation of componentspage ({ID:' Div1 ', Nownum:10,//Current page number allnum:10,//Total page number callBack:function(now,all) {alert (' Current page: ' +now+ ' total pages: ' +All ); } }) functionpage (opt) {if(!opt.id)return false;//if the element is not passed, it is not executed downward. varobj =document.getElementById (opt.id); varNownum = Opt.nownum | | 1;//the default processing varAllnum = Opt.allnum | | 5; varCallBack = Opt.callback | |function(){}; //Home Page if(nownum>=4&&allnum>=6){ varOA = document.createelement (' A '); Oa.href= ' #1 '; Oa.innerhtml= ' Home '; Obj.appendchild (OA); } //Previous Page if(nownum>=2){ varOA = document.createelement (' A '); Oa.href= ' # ' + (nowNum-1); Oa.innerhtml= ' previous page '; Obj.appendchild (OA); } //when the total number of pages is less than or equal to 5 pages if(allnum<=5){ for(vari=1;i<=allnum;i++){ varOA = document.createelement (' A '); Oa.href= ' # ' +i; if(Nownum = = i) {//processing of the current pageoa.innerhtml =i; }Else{oa.innerhtml= ' [' + i + '] '; } obj.appendchild (OA); } }Else{//when the total number of pages is greater than 5 pages for(vari=1;i<=5;i++){ varOA = document.createelement (' A '); if(Nownum = = 1 | | nownum = = 2) {//make a special deal when the current page is the first page and the second pageOa.href = ' # ' +i; if(Nownum = =i) {oa.innerhtml=i; }Else{oa.innerhtml= ' [' + i + '] '; } }Else if((allnum-nownum) = = 0 | | (allnum-nownum) = = 1) {//The last two pages do special processingOa.href = ' # ' + (allnum-5+i); if((allnum-nownum) = = 0 && i = = 5) {//The logic of this piece is more complicated.oa.innerhtml = (allnum-5+i); }Else if((allnum-nownum) = = 1 && i = = 4) {oa.innerhtml= (allnum-5+i); }Else{oa.innerhtml= ' [' + (Allnum-5+i) + '] '; } }Else{oa.href= ' # ' + (nownum-3+i); if(i==3) {oa.innerhtml= (nownum-3+i); }Else{oa.innerhtml= ' [' + (Nownum-3+i) + '] '; }} obj.appendchild (OA); } } //Next Page if((Allnum-nownum) >=1){ varOA = document.createelement (' A '); Oa.href= ' # ' + (nownum+1); Oa.innerhtml= ' next page '; Obj.appendchild (OA); } //last page if((allnum-nownum) >=3 && allnum>=6){ varOA = document.createelement (' A '); Oa.href= ' # ' +Allnum; Oa.innerhtml= ' Last '; Obj.appendchild (OA); } //Execute callbackCallBack (Nownum,allnum); //Add a Click event varAA = Obj.getelementsbytagname (' A '); for(vari=0;i<aa.length;i++) {Aa[i].onclick=function(){ varNownum = parseint ( This. getattribute (' href '). substring (1))//Note that this is the time to get the href, do not use this.href, because this gets an absolute address, to use getattribute //get the page number to the moment and re-renderobj.innerhtml = ";//Clearpage ({id:opt.id, nownum:nownum, Allnum:allnum, callback:callback}); return false;//Block Default Events } } } </script>The pagination in JS