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
4000
;
$("#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>进行数据的显示。

具体实例：