JavaScript implements simple paging effects _javascript tips

The following is a JavaScript implementation of the paging code, of course, must be implemented in conjunction with the background code. We can analyze the code, hoping to bring some help to you, the code is as follows:

<script type= "Text/javascript" > Function setpage (opt) {if (!opt.pagedivid | | Opt.allpagenum < OPT.CURPAGENUM | | Opt.allpagenum < Opt.showpagenum) {return false} var Allpagenum=opt.allpagenum; Total number of pages Var showpagenum=opt.showpagenum; The number of pages displayed Var Curpagenum=opt.curpagenum; 
 The current number of pages Var Pagedivbox=document.getelementbyid (opt.pagedivid); 
 The number of page numbers displayed on the left or right var Lrnum=math.floor (SHOWPAGENUM/2); 
  if (curpagenum>1) {var oa=document.createelement (' a '); 
  oa.href= ' #1 '; 
 Oa.innerhtml= ' Home ' pagedivbox.appendchild (OA); 
  } if (curpagenum>1) {var oa=document.createelement (' a '); 
  oa.href= ' # ' + (curpageNum-1); 
 Oa.innerhtml= ' previous page ' Pagedivbox.appendchild (OA); } if (curpagenum<showpagenum-2| | 
   Allpagenum==showpagenum) {for (Var i=1;i<=showpagenum;i++) {var OA = document.createelement (' a '); 
   Oa.href = ' # ' +i; 
   if (curpagenum==i) {oa.innerhtml = i; 
   else {oa.innerhtml = "[" + i + "]"; } Pagedivbox. appendchild (OA); } else {//Countdown first page processing if (allpagenum-curpagenum<lrnum && curpagenum = = allPageNum-1) {for (Var i 
    =1;i<=showpagenum;i++) {Console.log (curpagenum-showpagenum + i)); 
    var OA = document.createelement (' a '); 
    Oa.href = ' # ' + (Curpagenum-(showPageNum-1) + i);
    if (Curpagenum = = (Curpagenum-(showPageNum-1) + i)) {oa.innerhtml = (Curpagenum-(showPageNum-1) + i)} 
   else {oa.innerhtml = ' [' + (Curpagenum-(showPageNum-1) + i) + '] '} pagedivbox.appendchild (OA); Process else if (allpagenum-curpagenum<lrnum && curpagenum = = Allpagenum) {for (var i=1;i)//Last page 
    <=showpagenum;i++) {Console.log (curpagenum-showpagenum + i)); 
    var OA = document.createelement (' a '); 
    Oa.href = ' # ' + (curpagenum-showpagenum + i); 
    if (Curpagenum = = (Curpagenum-showpagenum + i)) {oa.innerhtml = (curpagenum-showpagenum + i)} else 
{     oa.innerhtml = ' [' + (Curpagenum-showpagenum + i) + '] '} pagedivbox.appendchild (OA); 
    } else {for (var i=1;i<=showpagenum;i++) {var OA = document.createelement (' a '); 
    Oa.href = ' # ' + (Curpagenum-(showpagenum-lrnum) + i);  
    if (Curpagenum = = (Curpagenum-(showpagenum-lrnum) + i)) {oa.innerhtml = (Curpagenum-(showpagenum-lrnum) + i) else {oa.innerhtml = ' [' + (Curpagenum-(showpagenum-lrnum) + i) + '] '} PAGEDIVBOX.APPENDCH 
   ILD (OA); }} if (Curpagenum<allpagenum) {for (Var i=1;i<=2;i++) {if (i==1) {var OA = Document.crea 
    Teelement (' a '); 
    oa.href= ' # ' + (parseint (curpagenum) +1); 
    oa.innerhtml = ' next page '} else {var OA = document.createelement (' a '); 
    oa.href= ' # ' +allpagenum; 
  oa.innerhtml = ' Last '} pagedivbox.appendchild (OA); 
 } var OA = document.getElementsByTagName (' a '); Add a Click event to the page number for (Var i=0;i<oa.length;i++) {Oa[i].onClick = function () {//page number of current point var shref = This.getattribute (' href '). substring (1); 
 Empty page display pagedivbox.innerhtml = ';  
Setpage ({pagedivid: ' page ', showpagenum:5,///Display number ALLPAGENUM:10,//Total pages Curpagenum:shref//Current pages}}}} Window.onload=function () {setpage ({pagedivid: ' page ', showpagenum:5,///Display number ALLPAGENUM:10,//Total pages Curpage

 Num:1//Current page})} </script>

Example two:

Example three:

The effect of the implementation is: previous page, first page 、... (Top N page numbers), n pages 、... (Next n page number), last page, next page. n can be odd or even, and generally like to take odd numbers

Total pages, current pages, jump addresses, number of page numbers displayed between the first and last pages function Pagebar (TP,CP,URL,PN) {var str = ' <ul class= ' page ' > ';
   if (tp>1 && cp>1) {var prev = cp-1; STR + + "<li><a class=" prev "title=" on the previous page "href=" Javascript:gopage (' +prev+ ', \ ' +url+ '); "
  ><span> prev </span></a></li> '; }else{str = ' <li><a class= ' prev "title=" on page "href=" javascript:void (0); "
  ><span> prev </span></a></li> '; } if (tp>1) {//First page if (cp==1) {str = ' <li class= ' current ' ><a href= ' javascript:gopage (1,\ ' +url+ '); "
   ><span>1</span></a></li> '; }else{str = ' <li><a href= ' javascript:gopage (1,\ ' +url+ '); "
   ><span>1</span></a></li> ';

    } if (tp>2) {var PNH = Math.floor (PN/2);
    Loop Start Page var s = CP-PNH;
    if (s<=1) {s = 2;
    ///Loop over page number var e = CP+PNH;
    if (E&GT;=TP) {e = tp-1; } if (s<= (1+PNH)) {if tp> (pn+2)) {e = s+ (pn-1);
      if (E&GT;=TP) {e = tp-1;
     }}else{s = 2;
      } if (e>= (TP-PNH)) {if (tp> (pn+2)) {s = e (pn-1);
      if (s<=1) {s = 2;
     }}else{e = tp-1;
    } if (e<s) {e = s;
     The multiple page jump if (s>2) {var sp = CP-PN after the first page;
     if (sp<1) {sp=1; str + = ' <li><a name= ' break "href=" Javascript:gopage (' +sp+ ', \ "+url+ ');"
    ><span>...</span></a></li> '; for (Var i=s;i<=e;i++) {if (I==CP) {str = ' <li class= ' current ' ><a href= ' javascript:gopage (' +i + ', \ "+url+ ');"
     ><span> ' +i+ ' </span></a></li> '; }else{str = ' <li><a href= ' javascript:gopage (' +i+ ', \ ' +url+ '); "
     ><span> ' +i+ ' </span></a></li> ';
     The multiple page jumps before//last page if (E < (tp-1)) {var EP = CP+PN;
     if (EP&GT;TP) {ep=tp; } str+ + "<li><a name=" Break "href=" Javascript:gopage (' +ep+ ', \ "+url+ ');"
    ><span>...</span></a></li> '; }//Last page if (CP==TP) {str = ' <li class= ' current ' ><a href= ' javascript:gopage (' +tp+ ', \ ' +url+ '); "
   ><span> ' +tp+ ' </span></a></li> '; }else{str = ' <li><a href= ' javascript:gopage (' +tp+ ', \ ' +url+ '); "
   ><span> ' +tp+ ' </span></a></li> '; }}else{str = ' <li class= ' current ' ><a href= ' javascript:void (0); "
  ><span>1</span></a></li> ';
   } if (tp>1 && cp<tp) {var next = cp+1; str = ' <li><a class= ' next "title=" Next "href=" Javascript:gopage (' +next+ ', \ ' +url+ '); "
  ><span> next page </span></a></li> '; }else{str = ' <li><a class= "Next" title= "Next" href= "javascript:void (0);"
  ><span> next page </span></a></li> ';
  str + = ' </ul> ';
 return str;

 }Jump page number, jump address function gopage (cp,url) {window.location.href = URL+CP;
 }