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異步請求后臺數據進行動態分頁功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
圖片精選
