Pure JavaScript Implementation Paging (two methods) _javascript tips

First put the effect chart:

There are many pages of Plug-ins and open source code, the single one is a backstage development ape, the front of the style of CSS and so on, so began to write their own. In fact, this paging principle is very simple, that is, using AJAX back to the table to pass the value (current page number), the background using limit for paging.

Because this is my first time to use JS to write pagination, write should not be perfect, some of the public did not extract, but it is still possible to use it, this piece of code can be used as a public paging to deal with, I was using

This piece of code writes two slightly different pagination! Common code extraction is also similar, mainly AJAX background and the value of the return is different, as long as the value of the total page number to get, click on the first page/next pages and so on the correct words, basically pagination is not what the problem

Pure JS Implementation of pagination method one:

Nonsense not much to say, directly on the code!

Note: This project is the whole use of JS to write, the foreground data through Ajax to obtain, and then to assemble, dynamic loading to the page.

1. First the previous page, the next page, and so on the code attached (inside the value is pseudo value, the following will be in JS to be assigned value!) )

<ul class= "page" id= "page" > <li id= "Shouye" class= "P-prev disabled" > <a href= ' javascript:indexpage (1) ;' > Home </a> </li> <li id= "Shangyiye" class= "P-prev disabled" > <a href= ' javascript:indexpage (- 1); ' ><i></i> prev </a> </li> <li ><a id= "one" href= "javascript:void (0);" >1</a ></li> <li><a id= "Two" href= "javascript:void (0);" >2</a></li> <li><a id= " Three "href=" javascript:void (0); ">3</a></li> <li class=" More "><a id=" five "href=" javascript : void (0); ">...</a></li> <li><a id=" Fore "href=" javascript:void (0); ">13855</a> </li> <li class= ' p-next ' > <a href= ' javascript:indexpage ( -3); ' onclick= ' Jumptopage (' 2 ', '/goods/ AjaxqueryGoodsList.do.html ', ', ' goodslistcontainer ', ' 13855 ', listpagecallback); > Next <i></i></a> </li> <li id= "Weiye" class= ' P-next '; <a href= ' javascript:void (0); ' onclick= ' indexpage (0); " > End </a> </li> <li class= "Total" > <span id= "Span_number" > altogether 13855 pages to <input type= "Te XT "Id=" Input_number "class=" Page-txtbox "/> page <input name=" "value=" Determine "type=" button "onclick=" Jumptopage (jQu ery (' #input_number '). Val (), '/goods/ajaxquerygoodslist.do.html ', ', ' goodslistcontainer ', ' 13855 ', Listpagecallback); "class=" page-btn "/> </span> </li> </ul>

2. First in the page to put two hidden fields, one is the current page number, one is the total page number, the total page number is loaded, after the query from the background directly attached to the value of the current page number is not operating one, it is necessary to assign value to the current page number

<input id= "Jiazai" type= "hidden" ></input><!--current page number--> <input id= "totalpage" type= "hidden"
 ></input><!--Total Page-->

3. Write a function that is loaded on a page and assigns a value to the total page number and current page number

$ (function () {
  $ (' #jiazai '). val (1);//Assign to current page number, default to First page
  ajaxfunction (Page,arg,chipssort, "); This method is the extraction of Ajax background access to the method
});

4. Extracted Ajax methods, this page will be used several times this method, all the collected it out, because the data of the page is obtained through Ajax from the background, back in the background is a list collection

Extract Ajax method
function Ajaxfunction (page,arg,chipssort,fontval) {
 $.ajax ({
  type: ' POST ',
  URL: '/ Admin/receptionchips/showlist ',//Request URL address
  data:{
   page:page,
   sort:arg,
   Chipssort:chipssort,
   fontval:fontval
  },
  dataType: ' json ',
  contentType: ' application/x-www-form-urlencoded; charset =utf-8 ',
  success:function (data) {
   //return value in the method of accessing the extract, returning commonfunction (data) from the background;}
 );

5. Code see this is not a lot, the last one

The method function commonfunction (data) {$ (' #projectlist ') of the string is extracted. Find ("Li"). Remove (); for (Var i=0;i<data.length;i++) {/***** Because this page is dynamically loaded, this is mainly to do the puzzle, the code is also a lot of, do not leak out to occupy space for the *****/<br>}<b R>//Start is the core of the pagination if (data.length>0) {//Set page number var pading = data[0].padingnum;//Total page number $ (' #totalpage '). Val (PA
   Ding); var page = $ (' #jiazai '). Val ();//Current Page $ (' #countpage '). HTML ("<b id= ' Currentpageno ' >" +page+ "</b>/" +pading+ "
    "); $ (' #span_number '). HTML ("A total of +pading+" page to <input type= ' text ' id= ' input_number ' class= ' ' page-txtbox '/> ' page <input Name= ' value= ' determines ' type= ' button ' onclick= ' Indexpage ( -2) '/goods/ajaxquerygoodslist.do.html ', ', ' Goodslistcontainer ', ' "+pading+", listpagecallback); ' class= ' page-btn '/> ')}else{$ (' #countpage '). HTML ("<b ID
  = ' Currentpageno ' > "+0+" </b>/"+0+");
  //Set the bottom of pagination is home 1 2 3 4 5 6 last var pading = data[0].padingnum;//Total page href= "javascript:void (0);" var nowpage = $ (' #jiazai '). Val ();//Current page//one two three Five fore<br>//The following code looks like a hassle, but it's not hard to understand all the same code, just adding some judgment if (nowpage<5) {$ (' #one '). Text (1);
   $ (' #one '). attr (' href ', ' javascript:pagenum (' +1+ ');
   $ (' #two '). Text (2);
   $ (' #two '). attr (' href ', ' javascript:pagenum ("' + (2) + '");
   $ (' #three '). Text (3);
   $ (' #three '). attr (' href ', ' javascript:pagenum ("' + (3) + '");
   $ (' #five '). Text (4);
   $ (' #five '). attr (' href ', ' javascript:pagenum ("' + (4) + '");
   $ (' #fore '). Text (5);
   $ (' #fore '). attr (' href ', ' javascript:pagenum ("' + (5) + '");
   $ (' #five '). Parent (). Show ();
  $ (' #fore '). Parent (). Show ();
   }else{//alert ("No longer on page fifth");
   Sets the middle of the current page $ (' #one '). Text (number (nowpage)-2);
   $ (' #one '). attr (' href ', ' javascript:indexpage ("' + (Nowpage)-2) + '");
   $ (' #two '). Text (number (nowpage)-1);
   $ (' #two '). attr (' href ', ' javascript:indexpage ("' + (Nowpage)-1) + '");
   $ (' #three '). Text (nowpage);
   $ (' #three '). attr (' href ', ' javascript:indexpage ("' + (nowpage) + '");
   $ (' #five '). Parent (). Show (); $ (' #fore '). Parent (). show ();
    Determine if the next page exceeds the total number of pages if (number (nowpage) +1>pading) {$ (' #five '). Parent (). Hide ();
   $ (' #fore '). Parent (). Hide ();
    }else{$ (' #five '). Parent (). Show ();
    $ (' #five '). Text (number (nowpage) +1);
   $ (' #five '). attr (' href ', ' javascript:indexpage ("' + (nowpage) +1) + '");
   //Determine if the second page of the next page exceeds the total page if (number (nowpage) +2>pading) {$ (' #fore '). Parent (). Hide ();
    }else{$ (' #fore '). Parent (). Show ();
    $ (' #fore '). Text (number (nowpage) +2);
   $ (' #fore '). attr (' href ', ' javascript:indexpage ("' + (nowpage) +2) + '");
   }//If the total number of pages is less than 5, this code is mainly to set 1 2 3 4 5 of these display and hidden if (pading==0) {$ (' #one '). Parent (). Hide ();
   $ (' #two '). Parent (). Hide ();
   $ (' #three '). Parent (). Hide ();
   $ (' #five '). Parent (). Hide ();
  $ (' #fore '). Parent (). Hide ();
   }else if (pading==1) {$ (' #shouye '). Hide ();
   $ (' #weiye '). Hide ();
   $ (' #one '). Parent (). Hide ();
   $ (' #two '). Parent (). Hide ();
   $ (' #three '). Parent (). Hide ();
   $ (' #five '). Parent (). Hide ();
  $ (' #fore '). Parent (). Hide (); }elsE if (pading==2) {$ (' #one '). Parent (). Show ();
   $ (' #two '). Parent (). Show ();
   $ (' #three '). Parent (). Hide ();
   $ (' #five '). Parent (). Hide ();
  $ (' #fore '). Parent (). Hide ();
   }else if (pading==3) {$ (' #one '). Parent (). Show ();
   $ (' #two '). Parent (). Show ();
   $ (' #three '). Parent (). Show ();
   $ (' #five '). Parent (). Hide ();
  $ (' #fore '). Parent (). Hide ();
   }else if (pading==4) {$ (' #one '). Parent (). Show ();
   $ (' #two '). Parent (). Show ();
   $ (' #three '). Parent (). Show ();
   $ (' #five '). Parent (). Show ();
  $ (' #fore '). Parent (). Hide ();
   }else{$ (' #one '). Parent (). Show ();
   $ (' #two '). Parent (). Show ();
   $ (' #three '). Parent (). Show ();
   $ (' #five '). Parent (). Show ();
  $ (' #fore '). Parent (). Show ();
   //Set Highlight, is the first page, 1 light, the second page when 2 bright $ (' #page a '). each (function () {$ (this). Parent (). Removeclass ("current");
   if ($ (this). Text () ==nowpage) {$ (a). Parent (). addclass ("current");
  }
  });
  Page End returns the top $ ("Html,body"). Animate ({scrolltop:0}, 500); Finally, add 1 $ (' #jiazai ') to the current page number. val (bianlaing) +numbER (1)); }

Pure JS Implementation Paging method two:

function Gopage (pno,psize) {var itable = document.getElementById ("Iddata"); var num = itable.rows.length;//table row number var totalpage = 0;//Total pages var pageSize = psize;//Display rows per page if (num-1)/pagesize > P  
  Arseint ((num-1)/pagesize)) {Totalpage=parseint ((num-1)/pagesize) +1;  
  }else{Totalpage=parseint ((num-1)/pagesize); var currentpage = pno;//Current page var startrow = (currentPage-1) * pagesize+1;//start displayed line var endrow = currentpage * pagesize+1;//End displayed Line Endrow = (Endrow > num)? 
 Num:endrow; 
 The first three lines always show for (i=0;i<1;i++) {var irow = itable.rows[i]; 
 Irow.style.display = "block"; 
 for (Var i=1;i<num;i++) {var irow = itable.rows[i]; 
 if (i>=startrow&&i<endrow) {irow.style.display = "block"; 
 }else{Irow.style.display = "None"; 
  } var pageend = document.getElementById ("Pageend"); 
  var tempstr = ""; if (currentpage>1) {tempstr + = "<a href="/"mce_href="/"#/" onmouseout= ' Mm_swapimgrestore () ' onmouseover=/' MM_ SwaPimage (' Image69 ', ', ' images/back_buttom01_dowm.jpg ', 1)/"onclick=/" Gopage ("+ (currentPage-1) +", "+psize+")/"> </a> "}else{TempStr + + <a href="/"mce_href="/"" #/"Onmouseout= ' Mm_swapimgrestore () ' onmouseover=/" M M_swapimage (' Image69 ', ', ' images/back_buttom01_dowm.jpg ', 1)/"></a> '"; 
   for (var i = 1; I <= totalpage i++) {if (i = = currentpage) {tempstr = i+ ""; 
   else {tempstr + = "<a href="/"mce_href="/"" #/"onclick=/" Gopage ("+ (i) +", "+psize+")/">" +i+ "</a>" } if (currentpage<totalpage) {TempStr = = "<a href="/"mce_href="/"#/" onmouseout=/"Mm_swapimgrestore" ()/" onmouseover=/"Mm_swapimage (' Image68 ', ', ', ' images/next_buttom01_dowm.jpg ', 1)/" onclick=/"gopage (" + "(currentpage+1) + "," +psize+ ")/" ></a> '; }else{TempStr + = "<a href="/"mce_href="/"" #/"onmouseout=/" Mm_swapimgrestore ()/"onmouseover=/" MM_swapImage (' Image68 ', ', ' images/next_buttom01_dowm.jpg ', 1)/"></a> '; } TempStr + = "<a href="/"mce_href="/"#top/onmouseout=/" Mm_swapimgrestore ()/"onmouseover=/" Mm_swapimage (' Image20 ', ', ' images/top_buttom01_dowm.jpg ', 1)/"></a> '; 
  document.getElementById ("Barcon"). InnerHTML = TempStr; 
 var base= ' <%=base%> '; 
 Window.onload = function () {gopage (1,10); 
 } <div id= "Barcon" name= "Barcon" ></div>

Warm tip: JS code in the next page of the definition of the picture according to their own needs can be changed

Well, it's done by the page, if you need to use, may be a phone call to understand my code, in fact, the code is not difficult, I was using two hours to write it, as long as a line of code to see, and add their own comments, this piece of the past, not half an hour is absolutely done!

All right, that's it. Two ways to introduce a pure JS to achieve the end of the page, there is no understanding of the place, welcome to put forward, exchange, learn and progress together, thank you.