首頁 > web前端 > js教程 > Jquery:ajax實作翻頁無刷新功能碼_jquery

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

WBOY
發布: 2016-05-16 17:26:55
原創
1336 人瀏覽過

不多說,直接貼代碼:
下面是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代碼部分:
複製代碼 程式碼如下:















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



下一頁

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板