SoFunction
Updated on 2025-02-28

JavaScript implements simple pagination effects

The following is a piece of pagination code implemented by JavaScript, which of course must be implemented in combination with background code. You can analyze the code yourself, hoping to bring some help to you. The code is as follows:

<script type="text/javascript">
function setPage(opt)
{ 
 if(! ||  <  ||  < )
 {
  return false
 } 
 var allPageNum=; //Total number of pages var showPageNum=; //Number of pages displayed var curpageNum=; // Current page count var pageDIvBox=(); 
 //The number of page numbers displayed on the left or right var lrNum=(showPageNum/2); 
 if(curpageNum>1)
 { 
  var oA=('a'); 
  ='#1'; 
  ='front page' 
  (oA); 
 } 
 if(curpageNum>1)
 { 
  var oA=('a'); 
  ='#'+(curpageNum-1); 
  ='Previous page' 
  (oA); 
 } 
 if(curpageNum<showPageNum-2||allPageNum==showPageNum)
 { 
  for(var i=1;i<=showPageNum;i++)
  { 
   var oA = ('a'); 
    = '#'+i; 
   if(curpageNum==i)
   { 
     = i; 
   }
   else
   { 
     = "[" + i + "]"; 
   } 
   (oA); 
  } 
 }
 else
 { 
  //The processing of the last page  if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum-1)
  { 
   for(var i=1;i<=showPageNum;i++)
   { 
    ((curpageNum - showPageNum + i)); 
    var oA = ('a'); 
     = '#'+ (curpageNum - (showPageNum-1) + i); 
    if(curpageNum == (curpageNum - (showPageNum-1) + i))
    { 
      = (curpageNum - (showPageNum-1) + i) 
    }
    else
    { 
      = '['+(curpageNum - (showPageNum-1) + i)+']' 
    } 
    (oA); 
   } 
  } 
  //The processing of the last page  else if(allPageNum-curpageNum<lrNum && curpageNum == allPageNum)
  { 
   for(var i=1;i<=showPageNum;i++)
   { 
    ((curpageNum - showPageNum + i)); 
    var oA = ('a'); 
     = '#'+ (curpageNum - showPageNum + i); 
    if(curpageNum == (curpageNum - showPageNum + i))
    { 
      = (curpageNum - showPageNum + i) 
    }
    else
    { 
      = '['+(curpageNum-showPageNum + i)+']' 
    } 
    (oA); 
   } 
  }
  else
  { 
   for(var i=1;i<=showPageNum;i++)
   { 
    var oA = ('a'); 
     = '#'+ (curpageNum - (showPageNum-lrNum) + i); 
    if(curpageNum == (curpageNum - (showPageNum-lrNum) + i))
    { 
      = (curpageNum - (showPageNum-lrNum) + i) 
    }
    else
    { 
      = '['+(curpageNum - (showPageNum-lrNum) + i)+']' 
    } 
    (oA); 
   } 
  } 
 } 
 if(curpageNum<allPageNum)
 { 
  for(var i=1;i<=2;i++)
  { 
   if(i==1)
   { 
    var oA = ('a'); 
    ='#'+(parseInt(curpageNum)+1); 
     = 'Next Page'
   }
 else
 { 
    var oA = ('a'); 
    ='#'+allPageNum; 
     = 'Last Page'
   } 
   (oA); 
  } 
 } 
 var oA = ('a'); 
 //Add a click event to the page number for(var i=0;i<;i++)
 { 
 oA[i].onclick = function(){ 
 //The page number of the current point var sHref = ('href').substring(1); 
 //Clear page number display  = ''; 
 setPage({ 
  pageDivId:'page', 
  showPageNum:5, //The number of displayed  allPageNum:10, //Total page count  curpageNum:sHref //Current page count }) 
 } 
} 
} 
=function()
{ 
 setPage({ 
  pageDivId:'page', 
  showPageNum:5, //The number of displayed  allPageNum:10, //Total page count  curpageNum:1 //Current page count }) 
} 
</script>

Example 2:

<html>
<head>
<style type="text/css">
body{
 font-size:12px;
}
</style>
</head>
<body>
<input type="button" value="Pagination" onclick="initializePageNav(1)">
<div ></div>
<script language="JavaScript">
<!--
function initializePageNav(iCurrPage)
{
 var iPageSize = 20;
 var iProCount = 2121;
 var b = ((iProCount%iPageSize)!=0);
 var iPageCount = parseInt(iProCount/iPageSize)+(b?1:0);
 if (iCurrPage > iPageCount) return false;
 iCurrPage = parseInt(iCurrPage);
 var sTemp = "";
 var sTemp1 = "Per-page:"+ iPageSize +"/<span style='color:red'>"+ iProCount +"</span>strip Number of pages:<span style='color:blue'>"+ iCurrPage +"</span>/"+ iPageCount +"Page";
 var sTemp2 = "<input type=\"text\" id=\"goPageNo\" value=\""+iCurrPage+"\" size=\"3\" /><input type=\"button\" value=\"GO\" onclick=\"initializePageNav($('goPageNo').value);\" />"
 if (iProCount==0)
 {
 sTemp = "&lt;font color='#cccccccc'>Home Previous Page Next Page Last Page</font>"; }
 else if (iPageCount==1)
 {
 sTemp = "&lt;font color='#cccccccc'>Home Previous Page Next Page Last Page</font>" }
 else if (iPageCount==iCurrPage)
 {
 sTemp = "&lt;a href='Javascript:initializePageNav(1)'&gt;首Page&lt;/a&gt; &lt;a href='Javascript:initializePageNav("+(iPageCount-1)+")'&gt;上一Page&lt;/a&gt; &lt;font color='#cccccccc'>Next page Last page</font>" }
 else if (iCurrPage==1)
 {
 sTemp = "&lt;font color='#cccccccc'>Home Previous Page </font><a href='Javascript:initializePageNav("+(iCurrPage+1)+")'>Next Page</a> <a href='Javascript:initializePageNav("+iPageCount+")'>Last Page</a>" }
 else
 {
 sTemp = "&lt;a href='Javascript:initializePageNav(1)'&gt;首Page&lt;/a&gt; &lt;a href='Javascript:initializePageNav("+(iCurrPage-1)+")'&gt;上一Page&lt;/a&gt; &lt;a href='Javascript:initializePageNav("+(iCurrPage+1)+")'&gt;下一Page&lt;/a&gt; &lt;a href='Javascript:initializePageNav("+(iPageCount)+")'>Last Page</a>"
 }
 $("pageDir").innerHTML = sTemp +" "+ sTemp2 + " " + sTemp1 ;
 CollectGarbage();
}
function $(o)
{
 return (o);
}
initializePageNav(1)
//--&gt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Example 3:

The effect achieved is: previous page, first page,... (the previous n page numbers), n page numbers,... (the next n page numbers), last page, next page. n can be an odd number or an even number, and generally like to take odd numbers

//Total number of pages, current number of pages, jump address, number of page numbers displayed between the first and last pagesfunction pageBar(tp,cp,url,pn){
  var str = ‘&lt;ul class=”page”&gt;';
  if(tp&gt;1 &amp;&amp; cp&gt;1){
   var prev = cp-1;
   str += ‘&lt;li&gt;&lt;a class=”prev” title=”Previous page” href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”&gt;&lt;span&gt;Previous page&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
  }else{
   str += ‘&lt;li&gt;&lt;a class=”prev” title=”Previous page” href=”javascript:void(0);”&gt;&lt;span&gt;Previous page&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
  }
  if(tp&gt;1){
   //Page 1   if(cp==1){
    str +=‘&lt;li class=”current”&gt;&lt;a href=”javascript:goPage(1,\”+url+‘\');”&gt;&lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
   }else{
    str +=‘&lt;li&gt;&lt;a href=”javascript:goPage(1,\”+url+‘\');”&gt;&lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
   }

   if(tp&gt;2){
    var pnh = (pn/2);

    //Loop start page number    var s = cp-pnh;
    if(s&lt;=1){
     s = 2;
    }

    //Loop end page number    var e = cp+pnh;
    if(e&gt;=tp){
     e = tp-1;
    }

    if(s&lt;=(1+pnh)){
     if(tp&gt;(pn+2)){
      e = s+(pn-1);
      if(e&gt;=tp){
       e = tp-1;
      }
     }else{
      s = 2;
     }
    }

    if(e&gt;=(tp-pnh)){
     if(tp&gt;(pn+2)){
      s = e-(pn-1);
      if(s&lt;=1){
       s = 2;
      }
     }else{
      e = tp-1;
     }
    }

    if(e&lt;s){
     e = s;
    }

    //The multiple pages after the first page jump    if(s&gt;2){
     var sp = cp-pn;
     if(sp&lt;1){
      sp=1;
     }
     str += ‘&lt;li&gt;&lt;a name=”break” href=”javascript:goPage(‘+sp+‘,\”+url+‘\');”&gt;&lt;span&gt;…&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
    }

    for(var i=s;i&lt;=e;i++){
     if(i==cp){
      str += ‘&lt;li class=”current”&gt;&lt;a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”&gt;&lt;span&gt;'+i+‘&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
     }else{
      str += ‘&lt;li&gt;&lt;a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”&gt;&lt;span&gt;'+i+‘&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
     }
    }

    // Multiple pages before the last page jump    if(e &lt; (tp-1)){
     var ep = cp+pn;
     if(ep&gt;tp){
      ep=tp;
     }
     str += ‘&lt;li&gt;&lt;a name=”break” href=”javascript:goPage(‘+ep+‘,\”+url+‘\');”&gt;&lt;span&gt;…&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
    }
   }

   //The last page   if(cp==tp){
    str +=‘&lt;li class=”current”&gt;&lt;a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”&gt;&lt;span&gt;'+tp+‘&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
   }else{
    str +=‘&lt;li&gt;&lt;a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”&gt;&lt;span&gt;'+tp+‘&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
   }

  }else{
   str +=‘ &lt;li class=”current”&gt;&lt;a href=”javascript:void(0);”&gt;&lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; ‘;
  }

  if(tp&gt;1 &amp;&amp; cp&lt;tp){
   var next = cp+1;
   str += ‘&lt;li&gt;&lt;a class=”next” title=”Next page” href=”javascript:goPage(‘+next+‘,\”+url+‘\');"><span>Next page</span></a></li>';
  }else{
   str += ‘&lt;li&gt;&lt;a class=”next” title=”Next page” href=”javascript:void(0);”&gt;&lt;span&gt;Next page&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;';
  }
  str += ‘&lt;/ul&gt;';
  return str;
 }

 //Jump page number, jump address function goPage(cp,url){
   = url+cp;
 }