執行個體代碼講解ajax實現的無重新整理分頁_AJAX相關

1、Ajax 無重新整理頁面的好處：提供良好的客戶體驗，通過 Ajax 在後台從資料庫中取得資料並展示，取締了等待載入頁面而出現的空白狀態；

2、那麼，Ajax 無重新整理頁面是運行在動態網頁面（.php）？還是靜態頁面（.html/.htm/.shtml）？答案是：靜態頁面；

3、實現原理：通過前端 JS 指令碼程式與 Ajax 相結合取得從動態網頁面返回的資料，並顯示。

現在什麼都講究一個無重新整理，就連分頁也是如此，下面是小編日常整理的關於一段無重新整理代碼，希望能夠幫到大家。

代碼如下:

一.html代碼部分:

<table class="table style-5">  <thead id="t_head">   <tr>    <th>序號</th>    <th>標題</th>    <th>地點</th>    <th>已報名</th>    <th>類別</th>    <th>操作</th>   </tr> </thead> <tbody id="t_body"> <!-- ajax填充列表 --></tbody> </table> <button id="firstPage">首頁</button> <button id="previous">上一頁</button> <button id="next">下一頁</button> <button id="last">尾頁</button> 

二.ajax代碼部分:

var pageSize = "10";//每頁行數 var currentPage = "1";//當前頁 var totalPage = "0";//總頁數 var rowCount = "0";//總條數 var params="";//參數 var url="activity_list.action";//action $(document).ready(function(){//jquery代碼隨著document載入完畢而載入  //分頁查詢  function queryForPages() {   $.ajax({    url:url,    type:'post',    dataType:'json',    data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params,    success:function callbackFun(data)   {     //解析json     var info = eval("("+data+")");     //清空資料     clearDate();     fillTable(info);    }   });  }  //填充資料  function fillTable(info) {   if(info.length>1)  {    totalPage=info[info.length-1].totalPage;    var tbody_content="";//不初始化字串"",會預設"undefined"    for(var i=0;i<info.length-1;i++)   {     tbody_content +="<tr>"     +"<td data-title='序號' >"+(i+1+(currentPage-1)*pageSize)+"</td>"     +"<td data-title='標題'>"+info[i].title.substr(0,20)+"</td>"     +"<td data-title='地點'>"+info[i].address.substr(0,6)+"</td>"     +"<td data-title='已報名'>"+info[i].quota_sign+"人</td>"     +"<td data-title='類別'>"+info[i].type+"</td>"     +"<td data-title='操作'><a href='<%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"'>編輯</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>");   }  }  //清空資料  function clearDate() {   $("#t_body").html("");  } //搜尋活動  $("#searchActivity").click(function(){   queryForPages(); });  //首頁  $("#firstPage").click(function(){   currentPage="1";   queryForPages();  });  //上一頁  $("#previous").click(function(){   if(currentPage>1)  {    currentPage-- ;   }   queryForPages();  });  //下一頁  $("#next").click(function(){   if(currentPage<totalPage)  {    currentPage++ ;   }   queryForPages();  });  //尾頁  $("#last").click(function(){   currentPage = totalPage;   queryForPages();  }); });

以上代碼是小編給大家介紹的ajax實現的無重新整理分頁，希望對大家有所協助。