springmvc 带查询条件的分页，form的控制范围，怎么包裹条件提交给后台

分页效果图：

分页技术发展很多年，我一直想找一个简单好理解的方式去分页，我下面的文章是提供一种思路。因为写的比较跳跃，这文章适合有分页基础的同学。

此篇文章用的技术：springmvc+hibernate+oracle,用的主要是hibernate的分页，可以去看看原理

例如：

Hibernate List可以实现分页查询：从第2万条开始，取出100条记录
         Query q = session.createQuery("from Cat as c");
         q.setFirstResult(20000);
         q.setMaxResults(100);
         List l = q.list();
           

分页

  一 分页需要的参数：       

0 从jsp传给后台查询条件的参数，例如根据性别和地址查询：public class user{sex性别，address地址}

1  从jsp传给后台两个参数：1.1 当前页( currentPage 如当前页是第三页,你点击5，页面跳转到了第五页，当前页是5)，1.2  每页显示记录 条数(pageSize每页展示五条)

2  查询数据库获取：2.1 总记录数(totalcount 数据库中总共多少条数据),2.2 当前页面要展示的数据集合(conentList 页面所有要展示的数据，页面遍历这个集合展示数据)

3 由上面几个参数计算获取 ：3.1 总页数(pageCount页面总共展示多少页，最少一页，你可以设置最多十页，多于十页只展示十页，页面具体展示多少页要计算)，3.2 起始页(firstPage)码，3.3 结束页码(lastPage)。

 以上0里面的sex和address封装到user对象里，1-3参数封装成一个page对象里，网上有很多例子。我待会提供两个网上的例子。  public class page{              currentPage ;

             pageSize;

             totalcount; 

             conentList ;//**********注意：页面展示要遍历的数据，从数据查询的结果都放在这个list里

             pageCount;

             firstPage;

             lastPage;

}

先概览整个js和jsp源码，下面会对每段代码都讲解（看不清，另存为查看）

注意，点击查询和点击页码跳转的不同： 点击查询带着查询条件(选择性别和区域)和当前页(currentPage)，因为查询后肯定从第一页显示，所以当前页为1。 点击页码跳转要带查询条件和当前页，但是这个当前页不一定是1，你点击第五页，页面跳转到了第五页，当前页就为5，点击第三页后，页面跳转到了第三页，当前页就为3，和你点击的页数相关。

二 点击按条件查询或点击跳页后查询

按条件查询：

假如：后台查询后返回pages和查询条件user

form的id="formId"
jsp部分:
<form id="formId" action="${pageContext.request.contextPath}/你的url......................." method="post">
 
<select id="sex" name="sex" value="" >
	<option value="" }>请选择性别</option>
	<option value="1" ${user.sex=="1"?'selected':''}>男</option>
	<option value="2" ${user.sex=="2"?'selected':''}>女</option>				                     	                      
 </select>

<div οnclick="pageCondition('currentPage')">查询</div>

js部分:
function pageCondition(currentPage){
	
		$("#formId").append('<input  id="currentPage" type="hidden" name="currentPage" value="1" />');
			
		$("#formId").submit();
	}
          
           

点击跳页

jsp部分：
<a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="item">页次：${currentPage }/${pageCount}</a> 
                           
<a onClick='gotoPage("1")' href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="item" >首页</a>
<c:forEach  begin="${pages.firstPage}" end="${pages.lastPage}" var="s">					
								
	<a onClick='gotoPage(${s})' href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="item" >${s}</a>
								
</c:forEach>												
<a οnclick="gotoPage(${lastPage})" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="尾页" class="item">尾页</a>
js部分：
function gotoPage(currentPage){
	
		$("#formId").append('<input value="'+currentPage+'" id="currentPage" type="hidden" name="currentPage"/>');
		
		$("#formId").submit();
}
           

三 查询到结果后jsp展示查询到的数据

假如：后台查询后返回pages和查询条件user

1 查询条件部分的回显：

<span style="font-family:Microsoft YaHei;"><select id="sex" name="sex" value="" >
	<option value="" }>请选择性别</option>
	<option value="1" ${user.sex=="1"?'selected':''}>男</option>
	<option value="2" ${user.sex=="2"?'selected':''}>女</option>				                     	                      
 </select></span>
           

2 table遍历结果部分：

         参见上文：2.2 当前页面要展示的数据集合(conentList 页面所有要展示的数据，页面遍历这个集合展示数据)，       <c:forEach items="${pages.conentList }" var="page" >            ....................       </c:forEach>

3  页码部分回显

<a href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="item">页次：${<currentPage}/${pageCount}</a> 
                           
<a onClick='gotoPage("1")' href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="item" >首页</a>
<c:forEach  begin="${pages.firstPage}" end="${pages.lastPage}" var="s">					
								
	<a onClick='gotoPage(${s})' href="javascript:void(0)" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="item" >${s}</a>
								
</c:forEach>												
<a οnclick="gotoPage(${lastPage})" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="尾页" class="item">尾页</a>
           

四：写在最后

2016-04-29-重新排版 我的所有博客目录: http://blog.csdn.net/wabiaozia?viewmode=contents