ajax+JS 實現分頁

<script type="text/javascript">
		$(function(){
			$("#titleName").val('${titleName}');
			//加載日期框
			$('#startDate').datebox({    
			    required:false   
			}); 
			$("#endDate").datebox({
				required:false
			});
			//加載數據
			var articleList = ${articleList};
			for(var i=0;i<articleList.length;i++){
				var date = new Date(articleList[i].acticleDate);
				var year = date.getFullYear();
				var month = (date.getMonth()+1)>=10?(date.getMonth()+1):"0"+date.getMonth();
				var day = date.getDate()>=10?date.getDate():"0"+date.getDate();
				var Hours = date.getHours()>=10?date.getHours():"0"+date.getHours();
				var minutes = date.getMinutes()>=10?date.getMinutes():"0"+date.getMinutes();
				var seconds = date.getSeconds()>=10?date.getSeconds():"0"+date.getSeconds();
				var strDate = year+"-"+month+"-"+day+" "+Hours+":"+minutes+":"+seconds;
		  	  	$("#titleAbstract"+i).html("<div class='titleDateByDingjd'><div class='titleByDingjd'><a style='font-size:18px;font-weight:bold;font-family:STSong;letter-spacing:2px;' href='"+articleList[i].fullHtml+"'>"+articleList[i].title+"</a></div><div class='dateByDingjd'>"+strDate+"</div></div>"+
      			"<div class='abstractByDingjd'>"+articleList[i].articleAbstract+"</div>");
		  		$("#titleAbstract"+i).show();
		  		$("#chrByDingjd"+i).show();
		  	}
		  	var count = ${count};
		  	$("#installPage").html("<div class='tiao'>共"+count+"條  第1/"+Math.ceil(count/10)+"頁  <a href='javascript:;' onclick='turnPage(0)'>首頁</a>  <a href='javascript:;' onclick='turnPage(1)'>上一頁</a>  <a href='javascript:;' onclick='turnPage(2)'>下一頁</a>  <a href='javascript:;' onclick='turnPage(3)'>尾頁</a>"+
		  						   "<input style='width:50px' id='skipPage' name='skipPage' value='1' type='text' /><button onclick=''>轉到</button></div>");
		});
		
        //點擊查詢觸發的函數
        function searchByCondition(){
        	 var titleName = $("#titleName").val();
        	 var articleAbstract = $("#articleAbstract").val();
        	 var articleSource = $("#articleSource").val();
        	 var columnId = $("#columnId").val();
        	 var startDate = $("#startDate").datebox('getValue');
        	 var endDate = $("#endDate").datebox('getValue');
        	 $.ajax({
        	 	url:'${ctx}/messageSearch.json',
        	 	data:{titleName:titleName,articleAbstract:articleAbstract,articleSource:articleSource,columnId:columnId,startDate:startDate,endDate:endDate},
        	 	type:'post',
        	 	dataType:'json',
        	 	success:function(data){
        	 		  $(".titleAbstract").hide();
        	 		  $(".chrByDingjd").hide();
	       			  //使用for循環，局部刷新數據
	       			  for(var i=0;i<data.articleList.length;i++){
	       			  	var date = new Date(data.articleList[i].acticleDate);
						var year = date.getFullYear();
						var month = (date.getMonth()+1)>=10?(date.getMonth()+1):"0"+date.getMonth();
						var day = date.getDate()>=10?date.getDate():"0"+date.getDate();
						var Hours = date.getHours()>=10?date.getHours():"0"+date.getHours();
						var minutes = date.getMinutes()>=10?date.getMinutes():"0"+date.getMinutes();
						var seconds = date.getSeconds()>=10?date.getSeconds():"0"+date.getSeconds();
						var strDate = year+"-"+month+"-"+day+" "+Hours+":"+minutes+":"+seconds;
				  	  	$("#titleAbstract"+i).html("<div class='titleDateByDingjd'><div class='titleByDingjd'><a style='font-size:18px;font-weight:bold;font-family:STSong;letter-spacing:2px;' href='"+data.articleList[i].fullHtml+"'>"+data.articleList[i].title+"</a></div><div class='dateByDingjd'>"+strDate+"</div></div>"+
		      			"<div class='abstractByDingjd'>"+data.articleList[i].articleAbstract+"</div>");
				  		$("#titleAbstract"+i).show();
				  		$("#chrByDingjd"+i).show();
	       			  }
	       			  $("#installPage").html("<div class='tiao'>共"+data.count+"條  第"+1+"/"+Math.ceil((data.count)/10)+"頁  <a href='javascript:;' onclick='turnPage(0)'>首頁</a>  <a href='javascript:;' onclick='turnPage(1)'>上一頁</a>  <a href='javascript:;' onclick='turnPage(2)'>下一頁</a>  <a href='javascript:;' onclick='turnPage(3)'>尾頁</a></div>");
	       		      $("#currentPage").val(data.smallPage);
	       		      $("#count").val(data.count);
	       	    }
        	 });
        }
        //重置
        function clearAll(){
       		$("#titleName").val("");
        	$("#articleAbstract").val("");
        	$("#articleSource").val("");
        	$("#columnId").val("");
        	$("#startDate").datebox('setValue','');
            $("#endDate").datebox('setValue','');
        }
        function turnPage(num){
        	var page = 1;//第一頁
        	var currentPage = parseInt($("#currentPage").val());//當前頁
        	var count1 = $("#count").val();//總條數
       		var countPage = Math.ceil(count1/10);//總頁數
        	if(num==0){//首頁
        		if(currentPage==1){
        			return ;
        		}else{
        			page =1;
        		}
        	}else if(num==1){//上一頁
        		if(currentPage==1){
        			return ;
        		}else{
        			page = currentPage-1;
        		}
        	}else if(num==2){//下一頁
        		if(currentPage==countPage){
        			return ;
        		}else{
        			page = currentPage+1;
        		}
        	}else if(num==3){//尾頁
        		if(currentPage==countPage){
        			return ;
        		}else{
        			page = countPage;
        		}
        	}
        	var titleName = $("#titleName").val();
        	var articleAbstract = $("#articleAbstract").val();
        	var articleSource = $("#articleSource").val();
        	var columnId = $("#columnId").val();
        	var startDate = $("#startDate").datebox('getValue');
        	var endDate = $("#endDate").datebox('getValue');
        	$.ajax({
        		url:'${ctx}/messageSearch.json',
        		data:{page:page,titleName:titleName,articleAbstract:articleAbstract,articleSource:articleSource,columnId:columnId,startDate:startDate,endDate:endDate},
        		dataType:'json',
        		type:'post',
        		success:function(data){
        			  $(".titleAbstract").hide();
        			  $(".chrByDingjd").hide();
        			  //使用for循環，局部刷新數據
        			  for(var i=0;i<data.articleList.length;i++){
        			  	var date = new Date(data.articleList[i].acticleDate);
						var year = date.getFullYear();
						var month = (date.getMonth()+1)>=10?(date.getMonth()+1):"0"+date.getMonth();
						var day = date.getDate()>=10?date.getDate():"0"+date.getDate();
						var Hours = date.getHours()>=10?date.getHours():"0"+date.getHours();
						var minutes = date.getMinutes()>=10?date.getMinutes():"0"+date.getMinutes();
						var seconds = date.getSeconds()>=10?date.getSeconds():"0"+date.getSeconds();
						var strDate = year+"-"+month+"-"+day+" "+Hours+":"+minutes+":"+seconds;
				  	  	$("#titleAbstract"+i).html("<div class='titleDateByDingjd'><div class='titleByDingjd'><a style='font-size:18px;font-weight:bold;font-family:STSong;letter-spacing:2px;' href='"+data.articleList[i].fullHtml+"'>"+data.articleList[i].title+"</a></div><div class='dateByDingjd'>"+strDate+"</div></div>"+
		      			"<div class='abstractByDingjd'>"+data.articleList[i].articleAbstract+"</div>");
				  		$("#titleAbstract"+i).show();
				  		$("#chrByDingjd"+i).show();
        			  }
        			  $("#installPage").html("<div class='tiao'>共"+data.count+"條  第"+data.smallPage+"/"+Math.ceil((data.count)/10)+"頁  <a href='javascript:;' onclick='turnPage(0)'>首頁</a>  <a href='javascript:;' onclick='turnPage(1)'>上一頁</a>  <a href='javascript:;' onclick='turnPage(2)'>下一頁</a>  <a href='javascript:;' onclick='turnPage(3)'>尾頁</a></div>");
        		      $("#currentPage").val(data.smallPage);
        		      $("#count").val(data.count);
        		}
        	});
        }
	</script>
  </head>
  
  <body>
  	<div id="dBody" align="center">
  		<%@ include file="/jsp/web/include/top.jsp" %>
  	  <div id="divAll">
	      <div id="div1">
	      	<table>
	      		<tr>
	      			<td>欄目：</td>
	      			<td>
	      				<select name="" id="columnId">
	      					<option value="">請選擇欄目</option>
	      					<c:forEach items="${columnList}" var="item" >
	      						<option value="${item.id }">${item.name }</option>
	      					</c:forEach>
	      				</select>
	      			</td>
	      			<td>來源/作者：</td>
	      			<td><input type="text" name="" id="articleSource" value=""/></td>
	      		</tr>
	      		<tr>
	      			<td>標題：</td>
	      			<td><input type="text" name="" id="titleName" value=""/></td>
	      		</tr>
	      		<tr>
	      			<td>摘要：</td>
	      			<td><input type="text" name="" id="articleAbstract" value=""/></td>
	      		</tr>
	      		<tr>
	      			<td>日期：從</td><td><input type="text" name="startDate" id="startDate" value=""/></td>
					<td>到<input type="text" name="endDate" id="endDate" value=""/></td>
					<td>
						<input type="button" value="查詢" onclick="searchByCondition()"/>
						<input type="button" value="重置" onclick="clearAll()"/>
					</td>
	      		</tr>
	      	</table>
	      </div>
	      <div id="div2">
      		<div class="titleAbstract" id="titleAbstract0"></div>
      		<hr class="chrByDingjd" id="chrByDingjd0"/>
      		<div class="titleAbstract" id="titleAbstract1"></div>
      		<hr class="chrByDingjd" id="chrByDingjd1"/>
      		<div class="titleAbstract" id="titleAbstract2"></div>
      		<hr class="chrByDingjd" id="chrByDingjd2"/>
      		<div class="titleAbstract" id="titleAbstract3"></div>
      		<hr class="chrByDingjd" id="chrByDingjd3"/>
      		<div class="titleAbstract" id="titleAbstract4"></div>
      		<hr class="chrByDingjd" id="chrByDingjd4"/>
      		<div class="titleAbstract" id="titleAbstract5"></div>
      		<hr class="chrByDingjd" id="chrByDingjd5"/>
      		<div class="titleAbstract" id="titleAbstract6"></div>
      		<hr class="chrByDingjd" id="chrByDingjd6"/>
      		<div class="titleAbstract" id="titleAbstract7"></div>
      		<hr class="chrByDingjd" id="chrByDingjd7"/>
      		<div class="titleAbstract" id="titleAbstract8"></div>
      		<hr class="chrByDingjd" id="chrByDingjd8"/>
      		<div class="titleAbstract" id="titleAbstract9"></div>
      		<hr class="chrByDingjd" id="chrByDingjd9"/>
      		<div id="installPage">
      			<div>共0條  第0/0頁  
      				<a href='javascript:;' onclick='turnPage(0)'>首頁</a>  
      				<a href='javascript:;' onclick='turnPage(1)'>上一頁</a>  
      				<a href='javascript:;' onclick='turnPage(2)'>下一頁</a>  
      				<a href='javascript:;' onclick='turnPage(3)'>尾頁</a>  
      				<input style="width:50px" id="skipPage" name="skipPage" value="" type="text" /><button onclick="">轉到</button>
   				</div>
      		</div>
      		<input type="hidden" name="currentPage" id="currentPage" value="1"/>
      		<input type="hidden" name="count" id="count" value="${count }"/>
     	  </div>
  	  </div>
  	</div>
  </body>

原理：
1.在瀏覽器上已經顯示的一個列表，使用ajax查詢數據，使用$().html,替換已有的代碼，從而達到頁面整體無刷新，局部刷新的目的！

實現步驟：
1.在jsp頁面，引用jquery，<body>中，書寫：
<div id="divTest"></div>，顯示數據區域；
2.在JS中，使用ajax，進行後臺請求數據，返回數據給前臺；(後臺根據，條件進行查詢，查出你要顯示的數據)
var str ="";
$.ajax({
url:'',
data:{},
dataType:'',
type:'',
success:function(data){
for(data.list){
//組裝string
}
alert(data.mesg);
$("#divTest").html(str);//替換已有的html
}
});

3.完成！

原理如上，我是使用div進行數據的顯示，你也可以使用<table>進行數據的顯示。

具體實例：