使用Ajax異步請求怎么對后臺數據進行動態分頁

本篇文章為大家展示了使用Ajax異步請求怎么對后臺數據進行動態分頁，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

ajax請求后臺拿到json類型的數據后，可以在它的success回調方法中進行動態分頁，也就是表格重繪，此時，我們需要得到的數據包括：查詢得到的數據、數據總條數、總頁數、當前頁數，其中前三條可在后臺獲取，對于當前頁數，需要從前端獲取點擊頁數再通過請求傳遞給后臺，后臺做完相應處理后再傳回給前端。

請看如下例子：

/**
   * 
   * @param page 當前頁
   */
  function getData(page){
    var schoolid = $("#schoolid option:selected").text();
    var apptype = $("#apptype option:selected").text();
    var appname = $("#appname").val();
    $.ajax({
      type : "POST",
      url : "pageAjax",
      dataType : "json",
      data : {'schoolid':schoolid,'apptype':apptype,'page':page,'appname':appname},
      success : function(data){
         console.log("成功了！"+data);
         $("#table").html("");
         $(".turn_page").html("");
         var str = "<tr><th class='w20'>應用編號</th>"
              +"<th class='w15'>學校名稱</th>"
              +"<th class='w30'>應用名稱</th>"
              +"<th class='w25'>應用分類</th>"
              +"<th class='w10'>應用類型</th></tr>";
         for(var i=0;i<data.resultList.length;i++){
           str += "<tr onclick='showAppDetail(this);'><td>"+data.resultList[i].appid+"</td><td>"
           +data.resultList[i].schoolid+"</td><td>"+data.resultList[i].appname+"</td><td>"
           +data.resultList[i].app_departid+"</td><td>"+data.resultList[i].apptype+"</td></tr>";
         }
         $("#table").html(str);    //重繪table
         var pageNum = data.pageNum;  //獲取得到的數據頁數
         var curPage = data.curPage;  //獲取當前頁
         str = "";
         /*若頁數大于1則添加上一頁、下一頁鏈接*/
         if(data.pageNum>1){
          str = "<ul><li><a href='javascript:void(0);onclick=preEvent();' id='pre' data-num='1'>上一頁</a></li>" 
         }else{
           str = "<ul>";
         }
         /*循環輸出每一頁的鏈接*/
         for(var i=0;i<data.pageNum;i++){
           str += "<li><a href='javascript:void(0);onclick=getData("+(parseInt(i)+1)+");' data-type='num'>"+(parseInt(i)+1)+"</a></li>";
         }
         if(str.indexOf("上一頁")>-1){
           str += "<li><a href='javascript:void(0);onclick=nextEvent();' id='next' data-num='1'>下一頁</a></li>"
              +"<span>共<span id='pageNum'>"+pageNum+"</span>頁</span></ul>";
         }else{
           str += "<span>共<span id='pageNum'>"+pageNum+"</span>頁</span></ul>";
         }
         $(".turn_page").html(str);
     //把當前頁碼存到上一頁、下一頁的data-num屬性中，這樣可以在點擊上一頁或者下一頁時知道應該跳到哪頁
         $("#pre").attr("data-num",curPage);
         $("#next").attr("data-num",curPage);
      },
      error : function(data){
        alert("請求失敗");
      }
    });
  }
/**
   * 上一頁點擊事件
   */
  function preEvent(){
    var curPage = $("#pre").attr("data-num");
    if(curPage<=1){
      $(this).attr('disabled',"true");
    }else{
      curPage = parseInt(curPage)-1;
      getData(curPage);
    }
  }
  /**
   * 下一頁點擊事件
   */
  function nextEvent(){
    var curPage = $("#next").attr("data-num");
    var pageNum = $("#pageNum").text();
    if(curPage>=pageNum){
      $(this).attr('disabled',"true");
    }else{
      curPage = parseInt(curPage)+1;
      getData(curPage);
    }
  }

對應的HTML代碼

<div class="table">
    <table id="table">
    </table>
</div>
<div class="turn_page">
</div>

注意：標簽的href屬性，如href=”javascript:void(0);onclick=getData();”

要讓原來的點擊事件失去響應，重新給它定義點擊事件，要給它加上javascript:void(0);這句話，若寫的是href=”#”的話，點擊默認會跳到頁面頂部。

另外，ajax請求數據無刷新翻頁是異步請求，所以標簽的點擊事件要寫在它的屬性里，如上例，若寫在js當中，會造成頁面還沒加載出來，事件就已經觸發，導致沒有任何響應。

上述內容就是使用Ajax異步請求怎么對后臺數據進行動態分頁，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。