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



分页效果图:


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

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

例如:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. Hibernate List可以实现分页查询:从第2万条开始,取出100条记录  
  2.          Query q = session.createQuery("from Cat as c");  
  3.          q.setFirstResult(20000);  
  4.          q.setMaxResults(100);  
  5.          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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. form的id="formId"  
  2. jsp部分:  
  3. <form id="formId" action="${pageContext.request.contextPath}/你的url......................." method="post">  
  4.    
  5. <select id="sex" name="sex" value="" >  
  6.     <option value="" }>请选择性别</option>  
  7.     <option value="1" ${user.sex=="1"?'selected':''}></option>  
  8.     <option value="2" ${user.sex=="2"?'selected':''}></option>                                                             
  9.  </select>  
  10.   
  11. <div onclick="pageCondition('currentPage')">查询</div>  
  12.   
  13. js部分:  
  14. function pageCondition(currentPage){  
  15.       
  16.         $("#formId").append('<input  id="currentPage" type="hidden" name="currentPage" value="1" />');  
  17.               
  18.         $("#formId").submit();  
  19.     }  
  20.             
点击跳页
[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. jsp部分:  
  2. <a href="javascript:void(0)" class="item">页次:${currentPage }/${pageCount}</a>   
  3.                              
  4. <a onClick='gotoPage("1")' href="javascript:void(0)" class="item" >首页</a>  
  5. <c:forEach  begin="${pages.firstPage}" end="${pages.lastPage}" var="s">                     
  6.                                   
  7.     <a onClick='gotoPage(${s})' href="javascript:void(0)" class="item" >${s}</a>  
  8.                                   
  9. </c:forEach>                                                
  10. <a onclick="gotoPage(${lastPage})" href="#" title="尾页" class="item">尾页</a>  
  11. js部分:  
  12. function gotoPage(currentPage){  
  13.       
  14.         $("#formId").append('<input value="'+currentPage+'" id="currentPage" type="hidden" name="currentPage"/>');  
  15.           
  16.         $("#formId").submit();  
  17. }  


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

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

1 查询条件部分的回显:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <span style="font-family:Microsoft YaHei;"><select id="sex" name="sex" value="" >  
  2.     <option value="" }>请选择性别</option>  
  3.     <option value="1" ${user.sex=="1"?'selected':''}></option>  
  4.     <option value="2" ${user.sex=="2"?'selected':''}></option>                                                             
  5.  </select></span>  

2 table遍历结果部分:

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

3  页码部分回显

   
[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <a href="javascript:void(0)" class="item">页次:${<currentPage}/${pageCount}</a>   
  2.                              
  3. <a onClick='gotoPage("1")' href="javascript:void(0)" class="item" >首页</a>  
  4. <c:forEach  begin="${pages.firstPage}" end="${pages.lastPage}" var="s">                     
  5.                                   
  6.     <a onClick='gotoPage(${s})' href="javascript:void(0)" class="item" >${s}</a>  
  7.                                   
  8. </c:forEach>                                                
  9. <a onclick="gotoPage(${lastPage})" href="#" title="尾页" class="item">尾页</a>  


四:写在最后

2016-04-29-重新排版
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值