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;idata.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;idata.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異步請求后臺數據進行動態分頁功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:- layui實現數據分頁功能（ajax異步）
- layui實現數據表格table分頁功能（ajax異步）
- jquery ajax異步提交表單數據的方法
- AJAX Servlet實現數據異步交互的方法
- vue.js 表格分頁ajax 異步加載數據
- 關于ajax異步訪問數據的問題
