Servlet+JSP分页

以上面的文章列表分页为例，我觉得分页有两点重要的，

一是：分页我们必须首先自己搞清楚，文章总数、每页显示文章数(页大小)、页数

二是：如何做好页脚的分页导航条

 

实际应用中，文章总数这个值我们从数据库可以得到；每页显示的文章数即分页的页大小可以自己定义；页数我们可以通过下面的个表达式简单得出。

 

假设：

  int pageSize = 10; //分页大小
  int totalPosts = PagingDAO.entryList.size(); //总文章数
  int totalPages = totalPosts/pageSize + ((totalPosts%pageSize)>0?1:0); //计算得出的总页数

 

每页的文章怎么取出来？

  知道分页的大小之后，我们生成了页好的选取下拉框，每次选择第几页的时候，都会向Servlet传递当前选择页号的参数，这样Servlet调用后面的DAO相应的方法，取得文章列表信息，再回传到JSP以供显示。

 

看看我们用作显示的index.jsp

Html代码  

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>  
2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
3.   
4. page Size : ${pageSize}   
5. <br />  
6. Total Posts: ${totalPosts}   
7. <br />  
8. Total Pages: ${totalPages}   
9. <br />  
10. Current Page: ${pageNumber}   
11. <hr />  
12.   
13. <table>  
14.     <thead>  
15.         <tr align="center">  
16.             <td width="10%">Article ID</td>  
17.             <td width="70%">Article Title</td>  
18.             <td colspan="3">Actions</td>  
19.         </tr>  
20.     </thead>  
21.     <tbody>  
22.         <c:forEach items="${entryList}" var="entry">  
23.             <tr align="center">  
24.                 <td>${entry.entryID}</td>  
25.                 <td>${entry.title}</td>  
26.                 <td><a href="viewEntry?entryID=${entry.entryID}">View</a></td>  
27.                 <td><a href="editEntry?entryID=${entry.entryID}">Edit</a></td>  
28.                 <td><a href="deleteEntry?entryID=${entry.entryID}">Delete</a></td>  
29.             </tr>  
30.         </c:forEach>  
31.     </tbody>  
32.     <tfoot>  
33.         <tr align="center">  
34.             <td colspan="5">  
35.                 <jsp:include page="paging_footer.jsp"></jsp:include>  
36.             </td>  
37.         </tr>  
38.     </tfoot>  
39. </table>  
40.   
41. <hr/>  

<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

page Size : ${pageSize}
<br />
Total Posts: ${totalPosts}
<br />
Total Pages: ${totalPages}
<br />
Current Page: ${pageNumber}
<hr />

<table>
	<thead>
		<tr align="center">
			<td width="10%">Article ID</td>
			<td width="70%">Article Title</td>
			<td colspan="3">Actions</td>
		</tr>
	</thead>
	<tbody>
		<c:forEach items="${entryList}" var="entry">
			<tr align="center">
				<td>${entry.entryID}</td>
				<td>${entry.title}</td>
				<td><a href="viewEntry?entryID=${entry.entryID}">View</a></td>
				<td><a href="editEntry?entryID=${entry.entryID}">Edit</a></td>
				<td><a href="deleteEntry?entryID=${entry.entryID}">Delete</a></td>
			</tr>
		</c:forEach>
	</tbody>
	<tfoot>
		<tr align="center">
			<td colspan="5">
				<jsp:include page="paging_footer.jsp"></jsp:include>
			</td>
		</tr>
	</tfoot>
</table>

<hr/>

 

 

这些流程清晰之后，我们就可以实现分页导航条了，也就是上面的paging_footer.jsp

Html代码  

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>  
2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
3.   
4. <script type="text/javascript">  
5. function gotoSelectedPage()   
6. {   
7.     var x = document.getElementById("navigatorForm");   
8.     //alert("Original action: " + x.action)   
9.     x.submit();   
10. }   
11. </script>  
12. <form action="Posts" method="get" id="navigatorForm">  
13.     <a href="Posts?pageNumber=1">首页</a>    
14.     <c:if test="${pageNumber>1}">  
15.         <a href="Posts?pageNumber=${pageNumber-1}">上一页</a>  
16.     </c:if>    
17.     跳转到第 <select name="pageNumber" onchange="gotoSelectedPage();">  
18.     <c:forEach begin="1" end="${totalPages}" step="1" var="pageIndex">  
19.         <c:choose>  
20.             <c:when test="${pageIndex eq pageNumber}">  
21.                 <option value="${pageIndex}" selected="selected">${pageIndex}</option>  
22.             </c:when>  
23.             <c:otherwise>  
24.                 <option value="${pageIndex}">${pageIndex}</option>  
25.             </c:otherwise>  
26.         </c:choose>  
27.     </c:forEach>  
28.     </select>页    
29.     <c:if test="${pageNumber<totalPages}">  
30.         <a href="Posts?pageNumber=${pageNumber+1}">下一页</a>  
31.     </c:if>    
32.     <a href="Posts?pageNumber=${totalPages}">末页</a>  
33. </form>  

<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<script type="text/javascript">
function gotoSelectedPage()
{
	var x = document.getElementById("navigatorForm");
	//alert("Original action: " + x.action)
	x.submit();
}
</script>
<form action="Posts" method="get" id="navigatorForm">
	<a href="Posts?pageNumber=1">首页</a> 
	<c:if test="${pageNumber>1}">
		<a href="Posts?pageNumber=${pageNumber-1}">上一页</a>
	</c:if> 
	跳转到第 <select name="pageNumber" οnchange="gotoSelectedPage();">
	<c:forEach begin="1" end="${totalPages}" step="1" var="pageIndex">
		<c:choose>
			<c:when test="${pageIndex eq pageNumber}">
				<option value="${pageIndex}" selected="selected">${pageIndex}</option>
			</c:when>
			<c:otherwise>
				<option value="${pageIndex}">${pageIndex}</option>
			</c:otherwise>
		</c:choose>
	</c:forEach>
	</select>页 
	<c:if test="${pageNumber<totalPages}">
		<a href="Posts?pageNumber=${pageNumber+1}">下一页</a>
	</c:if> 
	<a href="Posts?pageNumber=${totalPages}">末页</a>
</form>

 

 

Posts是我们的Servlet，负责取得相关参数，和DAO打交道，取得一些文章的数据，然后传递到JSP，我们来看一下这个Servlet 的 doGet 方法。

Java代码  

1. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {   
2.     String pageNumberStr = request.getParameter("pageNumber");   
3.     int pageNumber = 1;   
4.     if(pageNumberStr!=null && !pageNumberStr.isEmpty())   
5.     {   
6.         pageNumber = Integer.parseInt(pageNumberStr);   
7.     }   
8.        
9.     int pageSize = 10; //分页大小   
10.     int totalPosts = PagingDAO.entryList.size(); //总文章数   
11.     int totalPages = totalPosts/pageSize + ((totalPosts%pageSize)>0?1:0); //计算得出的总页数   
12.        
13.     request.setAttribute("pageSize", pageSize);   
14.     request.setAttribute("totalPosts", totalPosts);   
15.     request.setAttribute("pageNumber", pageNumber);   
16.     request.setAttribute("totalPages", totalPages);   
17.        
18.     List<Entry> entryList = PagingDAO.getEntryList(pageNumber, pageSize);   
19.     System.out.println("entryList:"+ entryList.size());   
20.     request.setAttribute("entryList", entryList);   
21.        
22.     request.getRequestDispatcher("index.jsp").forward(request, response);          
23. }  

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String pageNumberStr = request.getParameter("pageNumber");
		int pageNumber = 1;
		if(pageNumberStr!=null && !pageNumberStr.isEmpty())
		{
			pageNumber = Integer.parseInt(pageNumberStr);
		}
		
		int pageSize = 10; //分页大小
		int totalPosts = PagingDAO.entryList.size(); //总文章数
		int totalPages = totalPosts/pageSize + ((totalPosts%pageSize)>0?1:0); //计算得出的总页数
		
		request.setAttribute("pageSize", pageSize);
		request.setAttribute("totalPosts", totalPosts);
		request.setAttribute("pageNumber", pageNumber);
		request.setAttribute("totalPages", totalPages);
		
		List<Entry> entryList = PagingDAO.getEntryList(pageNumber, pageSize);
		System.out.println("entryList:"+ entryList.size());
		request.setAttribute("entryList", entryList);
		
		request.getRequestDispatcher("index.jsp").forward(request, response);		
	}

 

  分页其实还是很简单的事情，为了方便新手上路，这里提供一下这个eclipse的工程压缩包，直接导入就能用了。

(注意：对于eclipse JEE版本，工程导入后，请自行拷贝jstl.jar 和 standard.jar到WEB-INF/lib目录，如果没有配置Server的话，down个tomcat在eclipse里配置一下，不然怎么run？这个基础的应该都会吧)