快捷導(dǎo)航

關(guān)于Ajax異步請(qǐng)求后臺(tái)數(shù)據(jù)進(jìn)行動(dòng)態(tài)分頁(yè)功能

更新時(shí)間：2018年06月01日 09:37:33 作者：裝B小青年

這篇文章主要介紹了Ajax異步請(qǐng)求后臺(tái)數(shù)據(jù)進(jìn)行動(dòng)態(tài)分頁(yè)功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧

ajax請(qǐng)求后臺(tái)拿到j(luò)son類型的數(shù)據(jù)后，可以在它的success回調(diào)方法中進(jìn)行動(dòng)態(tài)分頁(yè)，也就是表格重繪，此時(shí)，我們需要得到的數(shù)據(jù)包括：查詢得到的數(shù)據(jù)、數(shù)據(jù)總條數(shù)、總頁(yè)數(shù)、當(dāng)前頁(yè)數(shù)，其中前三條可在后臺(tái)獲取，對(duì)于當(dāng)前頁(yè)數(shù)，需要從前端獲取點(diǎn)擊頁(yè)數(shù)再通過請(qǐng)求傳遞給后臺(tái)，后臺(tái)做完相應(yīng)處理后再傳回給前端。

請(qǐng)看如下例子：

/**
   * 
   * @param page 當(dāng)前頁(yè)
   */
  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'>應(yīng)用編號(hào)</th>"
              +"<th class='w15'>學(xué)校名稱</th>"
              +"<th class='w30'>應(yīng)用名稱</th>"
              +"<th class='w25'>應(yīng)用分類</th>"
              +"<th class='w10'>應(yīng)用類型</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;  //獲取得到的數(shù)據(jù)頁(yè)數(shù)
         var curPage = data.curPage;  //獲取當(dāng)前頁(yè)
         str = "";
         /*若頁(yè)數(shù)大于1則添加上一頁(yè)、下一頁(yè)鏈接*/
         if(data.pageNum>1){
          str = "<ul><li><a href='javascript:void(0);onclick=preEvent();' id='pre' data-num='1'>上一頁(yè)</a></li>" 
         }else{
           str = "<ul>";
         }
         /*循環(huán)輸出每一頁(yè)的鏈接*/
         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("上一頁(yè)")>-1){
           str += "<li><a href='javascript:void(0);onclick=nextEvent();' id='next' data-num='1'>下一頁(yè)</a></li>"
              +"<span>共<span id='pageNum'>"+pageNum+"</span>頁(yè)</span></ul>";
         }else{
           str += "<span>共<span id='pageNum'>"+pageNum+"</span>頁(yè)</span></ul>";
         }
         $(".turn_page").html(str);
     //把當(dāng)前頁(yè)碼存到上一頁(yè)、下一頁(yè)的data-num屬性中，這樣可以在點(diǎn)擊上一頁(yè)或者下一頁(yè)時(shí)知道應(yīng)該跳到哪頁(yè)
         $("#pre").attr("data-num",curPage);
         $("#next").attr("data-num",curPage);
      },
      error : function(data){
        alert("請(qǐng)求失敗");
      }
    });
  }
/**
   * 上一頁(yè)點(diǎn)擊事件
   */
  function preEvent(){
    var curPage = $("#pre").attr("data-num");
    if(curPage<=1){
      $(this).attr('disabled',"true");
    }else{
      curPage = parseInt(curPage)-1;
      getData(curPage);
    }
  }
  /**
   * 下一頁(yè)點(diǎn)擊事件
   */
  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);
    }
  }

對(duì)應(yīng)的HTML代碼

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

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

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

另外，ajax請(qǐng)求數(shù)據(jù)無(wú)刷新翻頁(yè)是異步請(qǐng)求，所以標(biāo)簽的點(diǎn)擊事件要寫在它的屬性里，如上例，若寫在js當(dāng)中，會(huì)造成頁(yè)面還沒加載出來，事件就已經(jīng)觸發(fā)，導(dǎo)致沒有任何響應(yīng)。

總結(jié)

以上所述是小編給大家介紹的關(guān)于Ajax異步請(qǐng)求后臺(tái)數(shù)據(jù)進(jìn)行動(dòng)態(tài)分頁(yè)功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: