Example code to explain the AJAX implementation of the No refresh paging _ajax related

1, Ajax does not refresh the benefits of the page: to provide a good customer experience, through Ajax in the background from the database to obtain data and display, banning the waiting to load the page and appear in the blank state;

2, then, Ajax no Refresh page is running in the dynamic page (. php)? Still a static page (. html/.htm/.shtml)? The answer is: static page;

3, the implementation of the principle: through the front-end JS script program and Ajax combined to get the data returned from the dynamic page, and display.

Now what all pay attention to a no refresh, even pagination is so, the following is a small series of daily finishing on a period of no refresh code, hoping to help everyone.

The code is as follows:

A. HTML code section:

<table class= "Table style-5" > 
 <thead id= "T_head" > 
  <tr> 
   <th> serial number </th> 
   <th> title </th> 
   <th> site </th> 
   <th> signed </th> 
   <th> category </th> 
   <th> Operations </th> 
  </tr> 
</thead> 
<tbody id= "T_body" > < 
!-- Ajax populate list-->
</tbody> 
</table> 
<button id= "FirstPage" > Home </button> 
<button id= "Previous" > Prev </button> 
<button id= "Next" > next page </button> 

Two. Ajax Code section:

var pageSize = "10";//number of rows per page var currentpage = "1";//Current page var totalpage = "0";//Total pages var rowcount = "0";//total number of bars Var params= "";//Parameter var url= "Activity_list.action";//action $ (document). Ready (function () {//jquery code loaded with document loading//paging query Fun Ction queryforpages () {$.ajax ({url:url, type: ' Post ', DataType: ' JSON ', data: ' Qo.currentpage= ' +current Page+ "&qo.pagesize=" +pagesize+params, success:function callbackfun (data) {//parse JSON var info = eval (" 
    ("+data+") "); 
    Empty data cleardate (); 
   Filltable (info); 
 } 
  }); 
   }//Fill data function filltable (info) {if (info.length>1) {totalpage=info[info.length-1].totalpage; var tbody_content= "" "" "or" "" "" "", Default "undefined" for (Var i=0;i<info.length-1;i++) {tbody_content = "<tr& 
    gt; " + "&LT;TD data-title= ' serial number ' >" + (i+1+ (currentPage-1) *pagesize) + "</td>" + "<td data-title= ' title ' >" +info[i]. Title.substr (0,20) + "</td>" + "<td data-title= ' location ' > " +info[i].address.substr (0,6) + "</td>" + "<td data-title= ' registered ' >" +info[i].quota_sign+ "person </td>" + "&L T;TD data-title= ' category ' > ' +info[i].type+ ' </td> ' + ' <td data-title= ' operation ' ><a href= ' <%= Request.getcontextpath ()%>/activity_edit.action?id= "+info[i].id+" > Edit </a></td> "+" </tr> 
   "$ (" #t_body "). HTML (tbody_content); 
   } else {$ (' #t_head '). HTML (""); $ ("#t_body"). HTML ("<div style= ' height:200px;width:700px;padding-top:100px; ' align= ' center ' >" +info.msg+ ") 
  </div> "); 
 }//Empty data function Cleardate () {$ ("#t_body"). HTML ("");
 //Search Activity $ ("#searchActivity"). Click (function () {queryforpages (); 
 }); 
  Home $ ("#firstPage"). Click (function () {currentpage= "1"; 
 Queryforpages (); 
 }); 
  Prev $ ("#previous"). Click (function () {if (currentpage>1) {currentpage--; 
 } queryforpages (); 
 });
  Next page $ ("#next"). Click (function () {if (currentpage<totalpage){currentpage++; 
 } queryforpages (); 
 }); 
  Last $ ("#last"). Click (function () {currentpage = Totalpage; 
 Queryforpages (); 
}); });

The above code is small set to introduce the AJAX implementation of the No refresh pagination, I hope to help.