The pagination in JS

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.