欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于Ajax異步請求后臺數(shù)據(jù)進(jìn)行動態(tài)分頁功能

 更新時(shí)間：2018年06月01日 09:37:33   作者：裝B小青年  
這篇文章主要介紹了Ajax異步請求后臺數(shù)據(jù)進(jìn)行動態(tài)分頁功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧

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

請看如下例子：

/**
   * 
   * @param page 當(dāng)前頁
   */
  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)用編號</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ù)頁數(shù)
         var curPage = data.curPage;  //獲取當(dāng)前頁
         str = "";
         /*若頁數(shù)大于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>";
         }
         /*循環(huán)輸出每一頁的鏈接*/
         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);
     //把當(dāng)前頁碼存到上一頁、下一頁的data-num屬性中，這樣可以在點(diǎn)擊上一頁或者下一頁時(shí)知道應(yīng)該跳到哪頁
         $("#pre").attr("data-num",curPage);
         $("#next").attr("data-num",curPage);
      },
      error : function(data){
        alert("請求失敗");
      }
    });
  }
/**
   * 上一頁點(diǎn)擊事件
   */
  function preEvent(){
    var curPage = $("#pre").attr("data-num");
    if(curPage<=1){
      $(this).attr('disabled',"true");
    }else{
      curPage = parseInt(curPage)-1;
      getData(curPage);
    }
  }
  /**
   * 下一頁點(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);
    }
  }

對應(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)會跳到頁面頂部。

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

總結(jié)

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

相關(guān)文章

最新評論