Ajax分页 Spring MVC + Hibernate

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了Ajax分页 Spring MVC + Hibernate，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

效果图：


1. 添加公共类、方法、代码

1.分页类：Page.java

  1. package cn.com.aperfect.sso.base.dao;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.List;
  5.  
  6. public class Page<T> {
  7. 	// 当前页数
  8. 	private int currentPage;
  9. 	// 记录偏移量
  10. 	private int offset;
  11. 	// 总页数
  12. 	private int totalsPage;
  13. 	// 每页显示记录条数
  14. 	private int pageSize;
  15. 	// 总记录条数
  16. 	private int totalsCount;
  17. 	// 查询返回结果
  18. 	private List<T> result = new ArrayList<T>();
  19. 	// 分页链接
  20. 	private String uri;
  21. 	
  22. 	public Page(){}
  23. 	
  24. 	public Page(int currentPage,int pageSize) {
  25. 		this.currentPage = currentPage;
  26. 		this.pageSize = pageSize;
  27. 		this.offset = (currentPage-1)*pageSize;
  28. 	}
  29.  
  30. 	public String getUri() {
  31. 		return uri;
  32. 	}
  33.  
  34. 	public void setUri(String uri) {
  35. 		this.uri = uri;
  36. 	}
  37.  
  38. 	public int getCurrentPage() {
  39. 		return currentPage;
  40. 	}
  41.  
  42. 	public void setCurrentPage(int currentPage) throws Exception {
  43. 		if (currentPage < 0) {
  44. 			currentPage = 0;
  45. 		}
  46. 		this.currentPage = currentPage;
  47. 	}
  48.  
  49. 	public int getTotalsPage() {
  50. 		try {
  51. 			if (totalsCount % pageSize == 0) {
  52. 				totalsPage = totalsCount / pageSize;
  53. 			} else {
  54. 				totalsPage = (totalsCount / pageSize) + 1;
  55. 			}
  56. 		} catch (Exception e) {
  57. 			throw new RuntimeException(e);
  58. 		}
  59. 		return totalsPage;
  60. 	}
  61.  
  62. 	public void setTotalsPage(int totalsPage) {
  63. 		if (totalsPage < 0) {
  64. 			totalsPage = 0;
  65. 		}
  66. 		this.totalsPage = totalsPage;
  67. 	}
  68.  
  69. 	public int getPageSize() {
  70. 		return pageSize;
  71. 	}
  72.  
  73. 	public void setPageSize(int pageSize) {
  74. 		if (pageSize <= 0) {
  75. 			pageSize = 20;
  76. 		}
  77. 		this.pageSize = pageSize;
  78. 	}
  79.  
  80. 	public int getTotalsCount() {
  81. 		return totalsCount;
  82. 	}
  83.  
  84. 	public void setTotalsCount(int totalsCount) {
  85. 		if (totalsCount < 0) {
  86. 			totalsCount = 0;
  87. 		}
  88. 		this.totalsCount = totalsCount;
  89. 	}
  90.  
  91. 	public List<T> getResult() {
  92. 		return result;
  93. 	}
  94.  
  95. 	public void setResult(List<T> result) {
  96. 		this.result = result;
  97. 	}
  98.  
  99. 	public int getOffset() {
  100. 		return offset;
  101. 	}
  102.  
  103. 	public void setOffset(int offset) {
  104. 		this.offset = offset;
  105. 	}
  106. }
2. 公共的DAO / DAOImpl

DAO

  1. 	/**
  2. 	 * <b>function:</b> 传入查询语句和查询参数名key对应value，page指定currentPage和pageSize
  3. 	 * @param queryHql 查询语句
  4. 	 * @param paramMap 参数
  5. 	 * @param page 当前页和每页几条数据
  6. 	 * @throws Exception
  7. 	 */
  8. 	public Page<T> showPage(String queryHql,String countHql,Map<String,Object> paramMap,int currentPage,int pageSize) throws Exception;
IMPL 
  1. 	public Page<T> showPage(String queryHql,int pageSize) throws Exception {
  2. 		Page<T> page = new Page<T>(currentPage,pageSize);
  3. 		try {
  4. 			int dataCount = queryForInt(countHql,paramMap);
  5. 			page.setResult(queryForList(queryHql,paramMap,page.getOffset(),pageSize));
  6. 			page.setTotalsCount(dataCount);
  7. 		} catch (Exception e) {
  8. 			throw new RuntimeException(e);
  9. 		}
  10. 		return page;
  11. 	}
  12. 	
  13. 	private final int queryForInt(String queryIntHQL,Object> paramMap){
  14. 		Query query = this.getSession().createQuery(queryIntHQL);
  15. 		setQueryParameterValues(paramMap,query);
  16. 		int result = Integer.parseInt(query.uniqueResult().toString());
  17. 		return result;
  18. 	}
  19. 	
  20. 	private final List<T> queryForList(String queryHql,int offset,int pageSize){
  21. 		Query query = this.getSession().createQuery(queryHql);
  22. 		setQueryParameterValues(paramMap,query);
  23. 		if (offset>=0) {
  24. 			query.setFirstResult(offset);
  25. 		}
  26. 		if (pageSize>0) {
  27. 			query.setMaxResults(pageSize);
  28. 		}
  29. 		
  30. 		return query.list(); 
  31. 	}
  32. 	
  33. 	private final void setQueryParameterValues(Map<String,Query query){
  34. 		if (CollectionUtil.isEmpty(paramMap))	return ;
  35. 		
  36. 		for (Entry<String,Object> entry : paramMap.entrySet()) {
  37. 			query.setParameter(entry.getKey(),entry.getValue());
  38. 		}
  39. 		
  40. 	}

2.　代码（Controller）

Controller分别有两个请求的方法，请求的地址是不一样的。

一个用于初始化页面时候请求，另外一个是分页时候Ajax用的请求。

(第一个请求返回的是整个页面，ajax请求返回的只是一个抽取出来的*table.jsp，所以要两个请求，只是返回的jsp不一样。只是使用了js将原来页面的table替换掉新的而已)

方法主体是一样的。

  1. @Controller
  2. @RequestMapping("/srmUser")
  3. public class SrmUserController {
  4. 	
  5. 	@Resource
  6. 	private ISrmUserService srmUserService;
  7.  
  8. 	private void doSearch(HttpServletRequest request,HttpServletResponse response) throws Exception{
  9. 		int currentPage = ServletRequestUtils.getIntParameter(request,"currentPage",1);
  10. 		int pageSize = ServletRequestUtils.getIntParameter(request,"pageSize",10);
  11. 		
  12. 		//前台数据传到后台查询
  13. 		String enterpriseName = ServletRequestUtils.getStringParameter(request,"enterpriseName");
  14. 		String vendorName = ServletRequestUtils.getStringParameter(request,"vendorName");
  15. 		String userName = ServletRequestUtils.getStringParameter(request,"userName");
  16. 		String status = ServletRequestUtils.getStringParameter(request,"status");
  17. 		
  18. 		String fromCreateDate = ServletRequestUtils.getStringParameter(request,"fromCreateDate");
  19. 		String toCreateDate = ServletRequestUtils.getStringParameter(request,"toCreateDate");
  20. 		
  21. 		Page<SrmUser> page = srmUserService.searchUserList(enterpriseName,vendorName,userName,status,fromCreateDate,toCreateDate,currentPage,pageSize);
  22. 		
  23. 		//数据返回前台
  24. 		request.setAttribute("enterpriseName",enterpriseName);
  25. 		request.setAttribute("vendorName",vendorName);
  26. 		request.setAttribute("userName",userName);
  27. 		request.setAttribute("status",status);
  28. 		request.setAttribute("fromCreateDate",fromCreateDate);
  29. 		request.setAttribute("toCreateDate",toCreateDate);
  30. 		request.setAttribute("toCreateDate",toCreateDate);
  31. 		
  32. 		request.setAttribute("userListDto",page.getResult());
  33. 		request.setAttribute("pageEntity",page);
  34. 	}
  35. 	
  36. 	@RequestMapping("/searchUser")
  37. 	public String searchUser(HttpServletRequest request,HttpServletResponse response) throws Exception {
  38. 		
  39. 		doSearch(request,response);
  40. 		
  41. 		return "/srm_management/srmUser_manage";
  42. 	}
  43. 	
  44. 	@RequestMapping("/ajaxSearchUser")
  45. 	public String ajaxSearchUser(HttpServletRequest request,response);
  46. 		
  47. 		return "/srm_management/inc/srmUser_table";
  48. 	}
  49.  
  50. }

具体查询代码

  1. 	@Override
  2. 	public Page<SrmUser> getUserList(String enterpriseName,String vendorName,String userName,String status,String fromCreateDate,String toCreateDate,int pageSize) throws Exception {
  3.  
  4. 		Page<SrmUser> page = null;
  5. 		StringBuffer sbHQL = new StringBuffer();
  6. 		StringBuffer countHQL = new StringBuffer();
  7. 		Map<String,Object> paramMap = new HashMap<String,Object>();
  8. 		try {
  9. 			sbHQL.append("from SrmUser u where 1=1 "); 
  10. 			countHQL.append("select count(*) from SrmUser u where 1=1 "); 
  11. 			
  12. 			if (!StringUtil.isEmpty(enterpriseName)) {
  13. 				sbHQL.append(" and u.enterprise.enterpriseName like :enterpriseName ");
  14. 				countHQL.append(" and u.enterprise.enterpriseName like :enterpriseName ");
  15. 				paramMap.put("enterpriseName","%"+enterpriseName+"%");
  16. 			}
  17. 			if (!StringUtil.isEmpty(vendorName)) { 
  18. 				sbHQL.append(" and u.userId in (");
  19. 				sbHQL.append("select userId from SrmUserVendor s where s.vendorId in (");
  20. 				sbHQL.append("select vendorId from SrmVendor v where v.vendorName like :vendorName)) ");
  21. 				
  22. 				countHQL.append(" and u.userId in (");
  23. 				countHQL.append("select userId from SrmUserVendor s where s.vendorId in (");
  24. 				countHQL.append("select vendorId from SrmVendor v where v.vendorName like :vendorName)) ");
  25. 				
  26. 				paramMap.put("vendorName","%"+vendorName+"%");
  27. 			}
  28. 			if (!StringUtil.isEmpty(userName)) {
  29. 				sbHQL.append(" and u.userName like :userName ");
  30. 				countHQL.append(" and u.userName like :userName ");
  31. 				paramMap.put("userName","%"+userName+"%");
  32. 			}
  33. 			if (!StringUtil.isEmpty(status)) {
  34. 				sbHQL.append(" and u.status = :status ");
  35. 				countHQL.append(" and u.status = :status ");
  36. 				paramMap.put("status",Integer.parseInt(status));
  37. 			}
  38. 			if (!StringUtil.isEmpty(fromCreateDate)) {
  39. 				sbHQL.append(" and u.createDate >= :fromCreateDate ");
  40. 				countHQL.append(" and u.createDate >= :fromCreateDate ");
  41. 				paramMap.put("fromCreateDate",fromCreateDate);
  42. 			}
  43. 			if (!StringUtil.isEmpty(toCreateDate)) {
  44. 				sbHQL.append(" and u.createDate < :toCreateDate ");
  45. 				countHQL.append(" and u.createDate < :toCreateDate ");
  46. 				//toCreateDate 要加上一天
  47. 				java.util.Date date = new SimpleDateFormat("yyyy-MM-dd").parse(toCreateDate);
  48. 				Calendar calendar = new GregorianCalendar(); 
  49. 			    calendar.setTime(date); 
  50. 			    calendar.add(Calendar.DATE,1);
  51. 			    date= calendar.getTime(); 
  52. 				paramMap.put("toCreateDate",date);
  53. 			}
  54. 			
  55. 			sbHQL.append(" order by u.userId asc ");
  56. 			page = showPage(sbHQL.toString(),countHQL.toString(),pageSize);

3. 前台JSP等

Jsp要分成两部分，一部分是整体的第一次请求的时候的整体页面。

另一部分是*_table.jsp 就是要分页的那个table。

只要在整体里面抽出*_table.jsp页面就可以，然后整体页面里面引用*_table.jsp页面。


将要ajax请求的table替换成下面，这个<span>是用于后面Ajax请求成功的时候要替换的标识

  1.   					<span id="resourceSpan">
  2. 	  					<jsp:include page="inc/srmUser_table.jsp" />
  3.   					</span>

后台将整个*_table.jsp 页面返回到前台的<span>里面。

*.table.jsp

  1. <%@ page language="java" pageEncoding="UTF-8"%>
  2. <%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
  3. <table class="details">
  4. 	<tr class="noticClsSrm">
  5. 		<td>企业</td>
  6. 		<td>用户名</td>
  7. 		<td>创建者</td>
  8. 		<td>创建时间</td>
  9. 		<!-- <td>最后编辑者</td>
  10. 		<td>最后更新时间</td> -->
  11. 		<td>状态</td>
  12. 	</tr>
  13. 	<c:forEach var="userDto" items="${requestScope.userListDto}">
  14. 	<tr>
  15. 		<td>${userDto.enterprise.enterpriseName }</td>
  16. 		<td>${userDto.userName }</td>
  17. 		<td>${userDto.creatorName }</td>
  18. 		<td>
  19. 			<fmt:formatDate value="${userDto.createDate }" pattern="yyyy-MM-dd"/>  
  20. 		</td>
  21. 		<%-- <td>${userDto.editorName }</td>
  22. 		<td>
  23. 			<fmt:formatDate value="${userDto.updateDate }" pattern="yyyy-MM-dd"/>  
  24. 		</td> --%>
  25. 		<td>
  26. 		<c:if test="${userDto.status==0 }">启动</c:if>
  27. 		<c:if test="${userDto.status==1 }">冻结</c:if>
  28. 		<c:if test="${userDto.status==2 }">删除</c:if>
  29. 		</td>
  30. 	</tr>
  31. 	</c:forEach>
  32. </table>
  33. <jsp:include page="../../commons/page_ajax.jsp"/>
  34. <script type="text/javascript"> 
  35. 	//分页跳转
  36. 	var totalsPage = '${pageEntity.totalsPage}';
  37. 	if (totalsPage == '') totalsPage = 1;
  38. 	function ajaxGotoPage(currentPage) {
  39. 		if (currentPage == null || currentPage == "") return;
  40. 		if (isNaN(currentPage)) return;
  41. 		
  42. 		if (currentPage < 1) currentPage = 1;
  43. 		else if ((currentPage > totalsPage) || (currentPage==${pageEntity.currentPage})) return;
  44. 		
  45. 		var resourceSpan = $("#resourceSpan");
  46. 		resourceSpan.html("<br/><img src='${pageContext.request.contextPath }/commons/images/blue-loading.gif'/>");
  47. 		$.ajax({
  48. 			url:'${pageContext.request.contextPath }/v/srmUser/ajaxSearchUser',type:'post',data:{
  49. 				currentPage:currentPage,enterpriseName:$("#enterpriseName").val(),vendorName:$("#vendorName").val(),userName:$("#userName").val(),status:$("#status").val(),fromCreateDate:$("#fromCreateDate").val(),toCreateDate:$("#toCreateDate").val()
  50. 			},dataType:'text',timeout:60000,error: function(e) {
  51. 				alert(e);
  52. 			},success: function(result){
  53. 				resourceSpan.html(result);
  54. 			}
  55. 		});
  56. 	}
  57. 	function gotoPageByInput(){
  58. 		var currentPage=document.getElementById('goInput').value;
  59. 		ajaxGotoPage(parseInt(currentPage));
  60. 	}
  61. </script>

page_ajax.jsp 
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  2. <style>
  3. <span style="white-space:pre">	</span>.goSearchButton{background:url(<c:url value='/resources/images/ok.gif' />);border:0 none;height:19px;margin:0 0 0 5px;text-indent:-999px;width:37px;}
  4. <span style="white-space:pre">	</span>div.yk-pager {text-align: right;padding:3px 0px;margin: 3px 0px;color:#666666;}
  5. <span style="white-space:pre">	</span>div.yk-pager a{color: #036CB4;margin-right: 2px;padding:2px 5px;text-decoration: none;border:1px solid #929196;}
  6. <span style="white-space:pre">	</span>div.yk-pager a:hover {padding:2px 5px;margin-right: 2px;background-color:#ccdaf3;border: #a0a0a0 1px solid;}
  7. <span style="white-space:pre">	</span>div.yk-pager a:active {padding:2px 5px;margin-right: 2px;background-color:#ccdaf3;border: #a0a0a0 1px solid;}
  8. <span style="white-space:pre">	</span>div.yk-pager span.current {font-weight: bold;color: #FFFFFF;padding:2px 5px;margin-right: 2px;background-color:#6390cb;border:1px solid #3d68a0}
  9. <span style="white-space:pre">	</span>div.yk-pager span.disabled {color: #ccc;margin-right: 2px;border:1px solid #f3f3f3;padding:2px 5px;}
  10. <span style="white-space:pre">	</span>div.yk-pager .goInput{border:1px solid #99bbe8;color:#000000;font-family:Tahoma,SimSun,Arial;height:18px;margin:0 5px;text-align:center;vertical-align:top;width:30px;}
  11. <span style="white-space:pre">	</span>div.yk-pager .goButton{background:url(skin/ok.gif);border:0 none;height:19px;margin:0 0 0 5px;text-indent:-999px;width:37px;}
  12. </style>
  13. <div class="yk-pager">
  14. 				<a href="javascript:ajaxGotoPage(1);">首页</a>
  15. 				<a href="javascript:ajaxGotoPage(${pageEntity.currentPage-1});"> ◄上一页</a> 
  16. 				<a href="javascript:ajaxGotoPage(${pageEntity.currentPage+1});"> 下一页► </a>
  17. 				<a href="javascript:ajaxGotoPage(${pageEntity.totalsPage });"> 末页</a>
  18. 			总${pageEntity.totalsCount }条，第${pageEntity.currentPage}/${pageEntity.totalsPage }页，到第<input size=2 id="goInput" value=''/>页,<input type="button" class="goButton" onclick="gotoPageByInput();"/>
  19. </div>
ok.gif

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作