Jquery：ajax实现翻页；

不多说，直接贴代码:

下面是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 ; i<info.length-1;i++){
				tbody_content +="<tr>"
					                +"<td data-title='序号' >"+(i+1+(currentPage-1)*pageSize)+"</td>"
					                +"<td data-title='标题'>"+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>");
		}
	}

	
   //清空数据
   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代码部分：

<table class="table style-5">
	<thead id="t_head">
		<tr>
		<th>序号</th>
		<th>标题</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>