SSM和Ajax实现后端分页

效果展示

---

点击前一页后一页首页或者尾页或者是跳转都是静态的实现。

---

表单的实现

---

1  当点击confirm按钮时会显示第一页信息（我在这里设定的是点击confirm时候出现第一页信息和 首页 尾页 前一页 后一页等信息）这里是两个table在一块（和一个是一样的）。 

先看表单代码，解释在后面，表单代码如下（使用的bootstrap模板）：

<form role="form" id="orderform">
			<h3 class="main-title">Order Inquiry</h3>
			   <div class="divid30"></div>

				<div style="float:left">
					<table class="table table-striped">
					<thead>
					<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>
			</table></div>

			<div style="float:left" id="testpage"></div>
            <div style="float:left" class="modal-footer">
			<input type="button" class="btn confirm-btn" id="btn1"
			style="width:300px;margin-left:200px;margin-right:200px" value="Confirm">
			</div>
</form>

---

Ajax的实现

---

2  单击confirm按钮后添加控件部分的如下 这里大家主要理解page和sum就行了（具体解释在后面）：

$(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 这样这四个参数就是解决了.

---

后端sql实现

---

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后端分页就实现了。

---

总结

---

最后，简单说几点心得吧，在实现的过程中不要一味的寻求别人详细的模板或者解释，最重要的是理解整个过程，然后可以通过自己的方式进行实现。

最后，有什么不足的地方多多指教。