分页效果图:
分页技术发展很多年,我一直想找一个简单好理解的方式去分页,我下面的文章是提供一种思路。因为写的比较跳跃,这文章适合有分页基础的同学。
此篇文章用的技术: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 onclick="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)" class="item">页次:${currentPage }/${pageCount}</a>
-
- <a onClick='gotoPage("1")' href="javascript:void(0)" class="item" >首页</a>
- <c:forEach begin="${pages.firstPage}" end="${pages.lastPage}" var="s">
-
- <a onClick='gotoPage(${s})' href="javascript:void(0)" class="item" >${s}</a>
-
- </c:forEach>
- <a onclick="gotoPage(${lastPage})" href="#" 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)" class="item">页次:${<currentPage}/${pageCount}</a>
-
- <a onClick='gotoPage("1")' href="javascript:void(0)" class="item" >首页</a>
- <c:forEach begin="${pages.firstPage}" end="${pages.lastPage}" var="s">
-
- <a onClick='gotoPage(${s})' href="javascript:void(0)" class="item" >${s}</a>
-
- </c:forEach>
- <a onclick="gotoPage(${lastPage})" href="#" title="尾页" class="item">尾页</a>