首先我们来看一下效果
点击前一页后一页首页或者尾页或者是跳转都是静态的实现。
接下来具体看看是如何实现的
1 当点击confirm按钮时会显示第一页信息（confirm的功能和首页一样，但是只有点击confirm之后才会添加有首页等控件）
表单代码如下：
<tr style="background: silver;">
<th><span style="margin-right:80px;">订单号</span></th>
<th><span style="margin-right:100px;">订单日期</span></th>
<th><span style="margin-right:30px;">订单总价格</span></th>
</tr>
</thead>
<tbody id="trtest1" >
</tbody>
</table>
</div>
<div style="float:left">
<table class="table table-striped">
<thead>
<tr style="background: silver;">
<th><span style="margin-right:60px;">国家名</span></th>
<th><span style="margin-right:30px;">票数</span></th>
<th><span style="margin-right:50px;">旅游日期</span></th>
</tr>
</thead>
<tbody id=trtest2 >
</tbody>
2 单击confirm按钮后添加控件部分的如下：
$(function() {
var sum="";
var page="";
$("#btn1").click(function() {
$.ajax({
url : "${ppath}/order/orderselect",
type : "post",
data : {"page":"1"},
dataType : "json",
success : function(data) {
sum=data.page.sum;
page=data.page.page;
$("#trtest1>tr").remove();
$("#trtest2>tr").remove();
for(i in data.order)
{
var tt=data.order;
var o = new Date(tt[i].orderdate);
var tr1;
tr1=
'<td>'+tt[i].orderid+'</td>'+'<td>'+Format(o,"yyyy-MM-dd HH:mm:ss")+'</td>'+'<td>'+tt[i].totalprice+'</td>';
$("#trtest1").append("<tr>"+tr1+"</tr>");
}
for(j in data.order2)
{
var tt2=data.order2;
var p = new Date(tt2[j].ldate);
var tr2;
tr2='<td>'+tt2[j].statename+'</td>'+'<td>'+tt2[j].num+'</td>'+'<td>'+Format(p,"yyyy-MM-dd")+'</td>';
$("#trtest2").append("<tr>"+tr2+"</tr>");
}
$("#testpage>a").remove();
$("#testpage>input").remove();
$("#testpage>span").remove();
var tr0;
tr0='<a id="sy" style="margin-left:20px;margin-right:60px">首页</a>'+
'<a id="qyy"style="margin-right:60px">前一页</a>'+
'<span id="cp" style="margin-right:60px">第'+page+'页</span>'+
'<span style="margin-right:60px">共'+sum+'页</span>'+
'<a id="hyy" style="margin-right:60px">后一页</a>'+
'<a id="wy" style="margin-right:60px">尾页</a>'+
'<input style="margin-right:10px" type="number" max="10" min="1" size="2" id="tzt"><a id="tz">跳转</a>';
$("#testpage").append(tr0);
}
});
});
3 在理解上面这段代码之前需要知道几个分页需要的参数，代码如下：
private int page=0; //当前页
private int rows;//总记录数
private int pagecount; //每页显示记录数
private int sum;//总页数4 这四个参数中page由前端传到后台；rows总记录数可以从后台数据库获取；每页显示记录数可以由用户选择也可以后台设定（该模块为自己设定为5）；总页数的计算公式很多；该模块使用的公式是（总记录数+每页显示记录数-1）/每页显示记录数。
5 这样这四个参数就是解决了.
6 最后一个问题是数据查询；每次查询只查询五条（每页显示的记录数）mybatis代码如下：
List<Orders> selectlimit(int page,String username);//TOP查询7 这个sql和6的接口对应；
<select id="selectlimit" resultMap="BaseResultMap"
>
select
<include refid="Base_Column_List" />
from orders
where username = #{1,jdbcType=VARCHAR}
limit #{0},5
</select>8 后台实现代码如下：
@RequestMapping(value = { "/orderselect" })
public @ResponseBody Map<String, Object> queryorder(HttpServletRequest request, Model m) {
Account aa=(Account) request.getSession().getAttribute("users");
String username=aa.getUsername();
SortPage sp = new SortPage();
int curPage=Integer.parseInt(request.getParameter("page")==null?"1":request.getParameter("page"));
sp.setPage(curPage);//当前页
sp.setPagecount(5);//每页显示5条记录
int sumorder=oservice.selectsum(username);
sp.setRows(sumorder); //一共多少条记录
int sum=(sumorder+5-1)/5;
sp.setSum(sum);//求出多少页
List<Orders> list0=oservice.selectlimit((curPage-1)*5, username);
List<Cart> list1=new ArrayList<Cart>();
for (Orders orders : list0) {
list1.add(oservice.selectByid(orders.getOrderid()));
}
Map<String, Object> map = new HashMap<String, Object>();
request.getSession().setAttribute("page", sp);
map.put("page", sp);
map.put("order", list0);
map.put("order2", list1);
return map;
}
9 这样再看前面的jquey代码（首页的实现），其他的（前一页后一页）实现类似。
10 该文章不仅实现了AJAX分页，同时也实现了Ajax查询。
最后，有什么不足的地方多多指教。