快捷導(dǎo)航

Jquery：ajax實現(xiàn)翻頁無刷新功能代碼

更新時間：2013年08月05日 16:41:01 作者：

ajax實現(xiàn)翻頁在實際應(yīng)用中還是比較常見的，實現(xiàn)ajax翻頁有兩部分：js部分、html部分，具體如下，感興趣的朋友可以參考下，希望對大家有所幫助

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

 
var pageSize = "10";//每頁行數(shù) 
var currentPage = "1";//當(dāng)前頁 
var totalPage = "0";//總頁數(shù) 
var rowCount = "0";//總條數(shù) 
var params="";//參數(shù) 
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+")"); 
//清空數(shù)據(jù) 
clearDate(); 
fillTable(info); 
} 
}); 
} 
//填充數(shù)據(jù) 
function fillTable(info){ 
if(info.length>1){ 
totalPage = info[info.length-1].totalPage; 
var tbody_content="";//不初始化字符串"",會默認(rèn)"undefined" 
for(var i=0 ; i<info.length-1;i++){ 
tbody_content +="<tr>" 
+"<td data-title='序號' >"+(i+1+(currentPage-1)*pageSize)+"</td>" 
+"<td data-title='標(biāo)題'>"+info[i].title.substr(0,20)+"</td>" 
+"<td data-title='地點'>"+info[i].address.substr(0,6)+"</td>" 
+"<td data-title='已報名'>"+info[i].quota_sign+"人</td>" 
+"<td data-title='類別'>"+info[i].type+"</td>" 
+"<td data-title='操作'><a href='<%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"'>編輯</a></td>" 
+"</tr>" 
$("#t_body").html(tbody_content); 
} 
}else{ 
$("#t_head").html(""); 
$("#t_body").html("<div style='height: 200px;width: 700px;padding-top: 100px;' align='center'>"+info.msg+"</div>"); 
} 
} 

//清空數(shù)據(jù) 
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(currentPage<totalPage){ 
currentPage++ ; 
} 
queryForPages(); 
}); 
//尾頁 
$("#last").click(function(){ 
currentPage = totalPage; 
queryForPages(); 
}); 

}); 

下面是html代碼部分：

復(fù)制代碼代碼如下:

 
<table class="table style-5"> 
<thead id="t_head"> 
<tr> 
<th>序號</th> 
<th>標(biāo)題</th> 
<th>地點</th> 
<th>已報名</th> 
<th>類別</th> 
<th>操作</th> 
</tr> 
</thead> 
<tbody id="t_body"> 
<!-- ajax填充列表 --> 
</tbody> 
</table> 
<button id="firstPage">首頁</button> 
<button id="previous">上一頁</button> 
<button id="next">下一頁</button> 
<button id="last">尾頁</button> 