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

时间：2022-12-09 15:56:26

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

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

spring mvc整合jquery 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><spanid="firstname" class="ordertip"><imgsrc="images/sort_desc.gif" align="absmiddle"> </span></th><th nowrap align="middle"><a style="cursor:pointer;"onclick="Sort('lastname','lastname');return false;">lastname</a><spanid="lastname" class="ordertip"><imgsrc="images/sort_desc.gif" align="absmiddle"> </span></th><th nowrap align="middle"><a style="cursor:pointer;">操作</a><spanid="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());
}




标签：

相关文章