Jquery：ajax實作翻頁無刷新功能碼_jquery

不多說，直接貼代碼:
下面是js部分：

複製代碼 代碼如下:

var pageSize = "10";//每頁行數
var currentPage = "1";//當前頁
var totalPage = "0";//總頁數
var rowCount = "0";//總條數
var params="";//參數
var url="activity_list.action";//action
$(document).ready(function( ){//jquery程式碼隨著document載入完成而載入
//分頁查詢
function queryForPages(){
$.ajax({
url:url,
type:'post ',
dataType:'json',
data:"qo.currentPage=" currentPage "&qo.pageSize=" pageSize params,
success:function callbackFun(data){
//解析json
var info = eval("(" data ")");
//清空資料
clearDate();
fillTable(info);
}
});
}
//填充資料
function fillTable(info){
if(info.length>1){
totalPage = info[info.length-1].totalPage;
var tbody_content="";//不初始化字串"",會預設"undefined"
for(var i=0 ; itbody_content =" "
"" (i 1 (currentPage-1)*pageSize) ""
"" info[ i].title.substr(0,20) ""
"" info[i].address.substr(0,6) " "
"" info[i].quota_sign "人"
"" info[i]. type ""
"編輯"
""
$("#t_body").html(tbody_content);
}
}else{
$("#t_head").html("");
$("#t_body").html("

" info.msg "

");
}
}

//清空資料
function clearDate(){
$("# t_body").html("");
}

//搜尋活動
$("#searchActivity").click(function(){ queryForPages(); });
//首頁
$("#firstPage").click(function(){
currentPage="1";
queryForPages();
});
//上一頁
$("#previous").click(function(){
if(currentPage>1){
currentPage-- ;
}
queryForPages();
} );
//下一頁
$("#next").click(function(){
if(currentPagecurrentPage ;
}
queryForPages ();
});
//尾頁
$("#last").click(function(){
currentPage = totalPage;
queryForPages();
});

});

下面是html代碼部分：

複製代碼 程式碼如下:

序號	標題	地點	已報名	類別	操作

首頁
上一頁
下一頁
尾頁