實(shí)例代碼講解ajax實(shí)現(xiàn)的無(wú)刷新分頁(yè)

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

var pageSize = "10";//每頁(yè)行數(shù) 
var currentPage = "1";//當(dāng)前頁(yè) 
var totalPage = "0";//總頁(yè)數(shù) 
var rowCount = "0";//總條數(shù) 
var params="";//參數(shù) 
var url="activity_list.action";//action 
$(document).ready(function(){//jquery代碼隨著document加載完畢而加載 
 //分頁(yè)查詢 
 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="";//不初始化字符串"",會(huì)默認(rèn)"undefined" 
 for(var i=0;i<info.length-1;i++)
 { 
 tbody_content +="<tr>" 
 +"<td data-title='序號(hào)' >"+(i+1+(currentPage-1)*pageSize)+"</td>" 
 +"<td data-title='標(biāo)題'>"+info[i].title.substr(0,20)+"</td>" 
 +"<td data-title='地點(diǎn)'>"+info[i].address.substr(0,6)+"</td>" 
 +"<td data-title='已報(bào)名'>"+info[i].quota_sign+"人</td>" 
 +"<td data-title='類(lèi)別'>"+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(""); 
 }
 //搜索活動(dòng) 
 $("#searchActivity").click(function(){ 
 queryForPages();
 }); 
 //首頁(yè) 
 $("#firstPage").click(function(){ 
 currentPage="1"; 
 queryForPages(); 
 }); 
 //上一頁(yè) 
 $("#previous").click(function(){ 
 if(currentPage>1)
 { 
 currentPage-- ; 
 } 
 queryForPages(); 
 }); 
 //下一頁(yè) 
 $("#next").click(function(){ 
 if(currentPage<totalPage)
 { 
 currentPage++ ; 
 } 
 queryForPages(); 
 }); 
 //尾頁(yè) 
 $("#last").click(function(){ 
 currentPage = totalPage; 
 queryForPages(); 
 }); 
});