ajax請(qǐng)求后臺(tái)拿到j(luò)son類型的數(shù)據(jù)后，可以在它的success回調(diào)方法中進(jìn)行動(dòng)態(tài)分頁，也就是表格重繪，此時(shí)，我們需要得到的數(shù)據(jù)包括：查詢得到的數(shù)據(jù)、數(shù)據(jù)總條數(shù)、總頁數(shù)、當(dāng)前頁數(shù)，其中前三條可在后臺(tái)獲取，對(duì)于當(dāng)前頁數(shù)，需要從前端獲取點(diǎn)擊頁數(shù)再通過請(qǐng)求傳遞給后臺(tái)，后臺(tái)做完相應(yīng)處理后再傳回給前端。
請(qǐ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)用編號(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;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; //獲取得到的數(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;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);
//把當(dāng)前頁碼存到上一頁、下一頁的data-num屬性中，這樣可以在點(diǎn)擊上一頁或者下一頁時(shí)知道應(yīng)該跳到哪頁
$("#pre").attr("data-num",curPage);
$("#next").attr("data-num",curPage);
},
error : function(data){
alert("請(qǐng)求失敗");
}
});
}
/**
* 上一頁點(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);
}
}
對(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ì)跳到頁面頂部。
另外，ajax請(qǐng)求數(shù)據(jù)無刷新翻頁是異步請(qǐng)求，所以標(biāo)簽的點(diǎn)擊事件要寫在它的屬性里，如上例，若寫在js當(dāng)中，會(huì)造成頁面還沒加載出來，事件就已經(jīng)觸發(fā)，導(dǎo)致沒有任何響應(yīng)。
總結(jié)
以上所述是小編給大家介紹的關(guān)于Ajax異步請(qǐng)求后臺(tái)數(shù)據(jù)進(jìn)行動(dòng)態(tài)分頁功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- layui實(shí)現(xiàn)數(shù)據(jù)分頁功能（ajax異步）
- layui實(shí)現(xiàn)數(shù)據(jù)表格table分頁功能（ajax異步）
- jquery ajax異步提交表單數(shù)據(jù)的方法
- AJAX Servlet實(shí)現(xiàn)數(shù)據(jù)異步交互的方法
- vue.js 表格分頁ajax 異步加載數(shù)據(jù)
- 關(guān)于ajax異步訪問數(shù)據(jù)的問題
