ajax實(shí)現(xiàn)無刷新分頁的示例分析

這篇文章給大家分享的是有關(guān)ajax實(shí)現(xiàn)無刷新分頁的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

1、Ajax 無刷新頁面的好處：提供良好的客戶體驗(yàn)，通過 Ajax 在后臺從數(shù)據(jù)庫中取得數(shù)據(jù)并展示，取締了等待加載頁面而出現(xiàn)的空白狀態(tài)；

2、那么，Ajax 無刷新頁面是運(yùn)行在動態(tài)頁面（.php）？還是靜態(tài)頁面（.html/.htm/.shtml）？答案是：靜態(tài)頁面；

3、實(shí)現(xiàn)原理：通過前端 JS 腳本程序與 Ajax 相結(jié)合取得從動態(tài)頁面返回的數(shù)據(jù)，并顯示。

現(xiàn)在什么都講究一個(gè)無刷新，就連分頁也是如此，下面是小編日常整理的關(guān)于一段無刷新代碼，希望能夠幫到大家。

代碼如下:

一.html代碼部分:

<table class="table style-5"> 
 <thead id="t_head"> 
  <tr> 
   <th>序號</th> 
   <th>標(biāo)題</th> 
   <th>地點(diǎn)</th> 
   <th>已報(bào)名</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";//每頁行數(shù) 
var currentPage = "1";//當(dāng)前頁 
var totalPage = "0";//總頁數(shù) 
var rowCount = "0";//總條數(shù) 
var params="";//參數(shù) 
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+")"); 
    //清空數(shù)據(jù) 
    clearDate(); 
    fillTable(info); 
   } 
  }); 
 } 
 //填充數(shù)據(jù) 
 function fillTable(info)
 { 
  if(info.length>1)
  { 
   totalPage=info[info.length-1].totalPage; 
   var tbody_content="";//不初始化字符串"",會默認(rèn)"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='標(biāo)題'>"+info[i].title.substr(0,20)+"</td>" 
    +"<td data-title='地點(diǎn)'>"+info[i].address.substr(0,6)+"</td>" 
    +"<td data-title='已報(bào)名'>"+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>"); 
  } 
 } 
 //清空數(shù)據(jù) 
 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

ajax是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)，可以通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實(shí)現(xiàn)異步更新。

感謝各位的閱讀！關(guān)于“ajax實(shí)現(xiàn)無刷新分頁的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！