spring mvc整合jquery pagination插件，实现无刷新分页

这个可以是我们做分页时很方便，后台接受一个参数offset，然后返回一个含有分页的信息的实体就行了，pagination只需要一个总数就会自动计算分页的页码那些。

插件就自己去下啦，这里只是演示一下如何使用这款插件。先来看看效果图

前台代码：

<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.pagination.js" type="text/javascript"></script>
<link href="js/pagination.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
	var orderby = "order by id";
	$(document).ready(function() {

		initData(0, "getData.do");//初始化话加载

	});

	function initData(pageindx, url) {
		var tbody = "";
		var pageCount = "";
		var arg = $("#fn").val();
		var datas = "offset=" + (pageindx);
		if (arg != "") {
			datas += "&&conditions=" + (arg);
		}
		$.ajax({
			type : "POST",
			url : url,
			async : false,
			data : datas,
			success : function(json) {
				$("#pageeee").html("").append(json);
				pageCount = $("#records").val();	//在装分页的jsp页面可以取到这个总记录数，这个页面在下面
			}//end of success
		});

		if (pageCount != 0) {
			$("#Pagination").pagination(pageCount, {
				callback : pageselectCallback,
				prev_text : '<< 上一页',
                   next_text: '下一页 >>',
				items_per_page : 5,	//这时每页的行数，要和后台一致
				num_display_entries : 6,
				current_page : pageindx,
				num_edge_entries : 2,
				jump_text : 'Jump'
			});
			//翻页响应
			function pageselectCallback(index) {
				initData(index,url);
			}
		}
	}

</script>
<style type="text/css">
.a {
	background: #00B2BF;
}
</style>
</head>


	<table id="productTable" style="width:70%" class="TableList" border="5">
		<tr class="TableHeader">
			<th nowrap align="middle"><input id="allBox" type="checkbox">
			</th>
			<th nowrap align="middle"><a style="cursor:pointer;"
				onclick="Sort('id','id');return false;">id</a><span id="id"
				class="ordertip"><img src="images/sort_desc.gif"
					align="absmiddle"> </span></th>
			<th nowrap align="middle"><a style="cursor:pointer;"
				onclick="Sort('firstname','firstname');return false;">firstname</a><span
				id="firstname" class="ordertip"><img
					src="images/sort_desc.gif" align="absmiddle"> </span></th>
			<th nowrap align="middle"><a style="cursor:pointer;"
				onclick="Sort('lastname','lastname');return false;">lastname</a><span
				id="lastname" class="ordertip"><img
					src="images/sort_desc.gif" align="absmiddle"> </span></th>
			<th nowrap align="middle"><a style="cursor:pointer;">操作</a><span
				id="Span8" class="ordertip"><img src="images/sort_desc.gif"
					align="absmiddle"> </span></th>
		</tr>
		<tbody id="pageeee"></tbody>
	</table>
	<div id="Pagination" class="flickr" style="text-align:left"></div>

	firstname :
	<input id="fn" type="text" value="">
	<button id="you" style="cursor:pointer">我查</button>

然后是一个接受返回分页信息实体的jsp页面 ，因为我不是直接写在分页的Ajax的success回调函数里，那样做的话重用性不好，虽让可以使用json格式然后在解析append到一个div里。

所以还是返回到一个装分页信息的jsp页面，然后作为Ajax的success回调函数的data直接append到div里。

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<c:forEach var="v" items="${page.users}">
	<tr bgcolor="#FFFFFF" id="${v.id}">
		<td><div align="center">
				<input type="checkbox" value="${v.id}" class="subBox" name="aaa"  />
			</div></td>
		<td><div align="center">${v.id}</div></td>
		<td><div align="center">${v.firstname}</div></td>
		<td><div align="center">${v.lastname}</div></td>
		<td><div align="center">
				<a href="javascript:;" onClick="update(${v.id})">update</a>/<a
					href="javascript:;" onClick="deleteById(${v.id})">delete</a>
			</div></td>
	</tr>
</c:forEach>
<input type="hidden" id="records" value="${page.num}" />	//查到的总记录数，

然后是后台代码，只需要接受一个参数offset即可

	@RequestMapping(value = "/getData.do", method = RequestMethod.POST)
	public ModelAndView getData(@RequestParam(value = "offset") int offset) {
		List<User> users = this.userDao
				.getPageUser(offset * pageSize, pageSize);	//这个pageSize是这个类的final关键的成员变量private final int pageSize = 5;
		int allRecords = this.userDao.getRecords();
		Page page = new Page();
		page.setNum(allRecords);
		page.setUsers(users);
		ModelAndView mav = new ModelAndView("PageList");	//这里是把分页实体返回到解析分页的jsp页面
		mav.addObject("page", page);
		return mav;
	}

dao层就

public List<User> getPageUser(int offset, int pageSize) {
		// TODO Auto-generated method stub
		String sql = "select * from user order by id asc limit ?,?";
		return getJdbcTemplate().query(sql, new Object[] { offset, pageSize },
				new UserMapper());
	}