<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>haojii &#187; 分页</title>
	<atom:link href="http://www.haojii.com/tag/paging/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.haojii.com</link>
	<description>一个专注于技术的IT男</description>
	<lastBuildDate>Thu, 19 Apr 2012 07:58:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Servlet+JSP分页的一个例子</title>
		<link>http://www.haojii.com/2008/10/servlet-jsp-paging/</link>
		<comments>http://www.haojii.com/2008/10/servlet-jsp-paging/#comments</comments>
		<pubDate>Wed, 15 Oct 2008 08:52:12 +0000</pubDate>
		<dc:creator>Jacky</dc:creator>
				<category><![CDATA[JavaEE]]></category>
		<category><![CDATA[jsp]]></category>
		<category><![CDATA[sevlet]]></category>
		<category><![CDATA[分页]]></category>

		<guid isPermaLink="false">http://www.haojii.com/?p=153</guid>
		<description><![CDATA[想在网上找个这样的例子，奈何这个世界太浮夸，干实事的不多，搞转帖的垃圾网站一大堆，有的还转的七零八落，有的例子下载还要登录，着实郁闷了一把 最后还是决定自己写吧，本例子提供eclipse工程压缩包下载，直接导入就能用了，本着踏实的态度干这件事，希望能给新手帮助。 本例着重介绍如何表现层分页的小技巧，DAO只是一个Demo，数据库查询的分页技巧不在本文讨论范围之内。 先看看最终效果的一个截图： 单从表现层来说分页不是一个复杂的工作，稍微理一下思路，处于不同competence level的同学应该都能自己搞出来。 以上面的文章列表分页为例，我觉得分页有两点重要的， 一是：分页我们必须首先自己搞清楚，文章总数、每页显示文章数(页大小)、页数 二是：如何做好页脚的分页导航条 实际应用中，文章总数这个值我们从数据库可以得到；每页显示的文章数即分页的页大小可以自己定义；页数我们可以通过下面的个表达式简单得出。 假设：   int pageSize = 10; //分页大小   int totalPosts = PagingDAO.entryList.size(); //总文章数   int totalPages = totalPosts/pageSize + ((totalPosts%pageSize)&#62;0?1:0); //计算得出的总页数 每页的文章怎么取出来？   知道分页的大小之后，我们生成了页好的选取下拉框，每次选择第几页的时候，都会向Servlet传递当前选择页号的参数，这样Servlet调用后面的 DAO相应的方法，取得文章列表信息，再回传到JSP以供显示。 看看我们用作显示的index.jsp 这些流程清晰之后，我们就可以实现分页导航条了，也就是上面的paging_footer.jsp Posts是我们的Servlet，负责取得相关参数，和DAO打交道，取得一些文章的数据，然后传递到JSP，我们来看一下这个Servlet 的 doGet 方法。 分页其实还是很简单的事情，为了方便新手上路，这里提供一下这个eclipse的工程压缩包，直接导入就能用了。 (注意：对于eclipse &#8230; <a href="http://www.haojii.com/2008/10/servlet-jsp-paging/">继续阅读 <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>想在网上找个这样的例子，奈何这个世界太浮夸，干实事的不多，搞转帖的垃圾网站一大堆，有的还转的七零八落，有的例子下载还要登录，着实郁闷了一把</p>
<p>最后还是决定自己写吧，本例子提供eclipse工程压缩包下载，直接导入就能用了，本着踏实的态度干这件事，希望能给新手帮助。</p>
<p>本例着重介绍如何表现层分页的小技巧，DAO只是一个Demo，数据库查询的分页技巧不在本文讨论范围之内。</p>
<p>先看看最终效果的一个截图：</p>
<p><a href="http://www.haojii.com/wp-content/uploads/paging.png"><img class="size-full wp-image-154 alignnone" title="paging" src="http://www.haojii.com/wp-content/uploads/paging.png" alt="" width="641" height="423" /></a></p>
<p>单从表现层来说分页不是一个复杂的工作，稍微理一下思路，处于不同competence level的同学应该都能自己搞出来。</p>
<p>以上面的文章列表分页为例，我觉得分页有两点重要的，</p>
<p>一是：分页我们必须首先自己搞清楚，文章总数、每页显示文章数(页大小)、页数</p>
<p>二是：如何做好页脚的分页导航条</p>
<p>实际应用中，文章总数这个值我们从数据库可以得到；每页显示的文章数即分页的页大小可以自己定义；页数我们可以通过下面的个表达式简单得出。</p>
<p>假设：</p>
<p>  int pageSize = 10; //分页大小<br />
  int totalPosts = PagingDAO.entryList.size(); //总文章数<br />
  int totalPages = totalPosts/pageSize + ((totalPosts%pageSize)&gt;0?1:0); //计算得出的总页数</p>
<p>每页的文章怎么取出来？</p>
<p>  知道分页的大小之后，我们生成了页好的选取下拉框，每次选择第几页的时候，都会向Servlet传递当前选择页号的参数，这样Servlet调用后面的 DAO相应的方法，取得文章列表信息，再回传到JSP以供显示。</p>
<p>看看我们用作显示的index.jsp</p>
<pre class="brush: xml; title: ; notranslate">
&lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot;	pageEncoding=&quot;UTF-8&quot;%&gt;
&lt;%@ taglib uri=&quot;http://java.sun.com/jsp/jstl/core&quot; prefix=&quot;c&quot;%&gt;

page Size : ${pageSize}
&lt;br /&gt;
Total Posts: ${totalPosts}
&lt;br /&gt;
Total Pages: ${totalPages}
&lt;br /&gt;
Current Page: ${pageNumber}
&lt;hr /&gt;

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

&lt;hr/&gt;
</pre>
<p>这些流程清晰之后，我们就可以实现分页导航条了，也就是上面的paging_footer.jsp</p>
<pre class="brush: xml; title: ; notranslate">
&lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot;	pageEncoding=&quot;UTF-8&quot;%&gt;
&lt;%@ taglib uri=&quot;http://java.sun.com/jsp/jstl/core&quot; prefix=&quot;c&quot;%&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
function gotoSelectedPage()
{
	var x = document.getElementById(&quot;navigatorForm&quot;);
	//alert(&quot;Original action: &quot; + x.action)
	x.submit();
}
&lt;/script&gt;
&lt;form action=&quot;Posts&quot; method=&quot;get&quot; id=&quot;navigatorForm&quot;&gt;
	&lt;a href=&quot;Posts?pageNumber=1&quot;&gt;首页&lt;/a&gt;
	&lt;c:if test=&quot;${pageNumber&gt;1}&quot;&gt;
		&lt;a href=&quot;Posts?pageNumber=${pageNumber-1}&quot;&gt;上一页&lt;/a&gt;
	&lt;/c:if&gt;
	跳转到第 &lt;select name=&quot;pageNumber&quot; onchange=&quot;gotoSelectedPage();&quot;&gt;
	&lt;c:forEach begin=&quot;1&quot; end=&quot;${totalPages}&quot; step=&quot;1&quot; var=&quot;pageIndex&quot;&gt;
		&lt;c:choose&gt;
			&lt;c:when test=&quot;${pageIndex eq pageNumber}&quot;&gt;
				&lt;option value=&quot;${pageIndex}&quot; selected=&quot;selected&quot;&gt;${pageIndex}&lt;/option&gt;
			&lt;/c:when&gt;
			&lt;c:otherwise&gt;
				&lt;option value=&quot;${pageIndex}&quot;&gt;${pageIndex}&lt;/option&gt;
			&lt;/c:otherwise&gt;
		&lt;/c:choose&gt;
	&lt;/c:forEach&gt;
	&lt;/select&gt;页
	&lt;c:if test=&quot;${pageNumber&lt;totalPages}&quot;&gt;
		&lt;a href=&quot;Posts?pageNumber=${pageNumber+1}&quot;&gt;下一页&lt;/a&gt;
	&lt;/c:if&gt;
	&lt;a href=&quot;Posts?pageNumber=${totalPages}&quot;&gt;末页&lt;/a&gt;
&lt;/form&gt;
</pre>
<p>Posts是我们的Servlet，负责取得相关参数，和DAO打交道，取得一些文章的数据，然后传递到JSP，我们来看一下这个Servlet 的 doGet 方法。</p>
<pre class="brush: java; title: ; notranslate">
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String pageNumberStr = request.getParameter(&quot;pageNumber&quot;);
		int pageNumber = 1;
		if(pageNumberStr!=null &amp;&amp; !pageNumberStr.isEmpty())
		{
			pageNumber = Integer.parseInt(pageNumberStr);
		}

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

		request.setAttribute(&quot;pageSize&quot;, pageSize);
		request.setAttribute(&quot;totalPosts&quot;, totalPosts);
		request.setAttribute(&quot;pageNumber&quot;, pageNumber);
		request.setAttribute(&quot;totalPages&quot;, totalPages);

		List&lt;Entry&gt; entryList = PagingDAO.getEntryList(pageNumber, pageSize);
		System.out.println(&quot;entryList:&quot;+ entryList.size());
		request.setAttribute(&quot;entryList&quot;, entryList);

		request.getRequestDispatcher(&quot;index.jsp&quot;).forward(request, response);
	}
</pre>
<p>分页其实还是很简单的事情，为了方便新手上路，这里提供一下这个eclipse的工程压缩包，直接导入就能用了。</p>
<p>(注意：对于eclipse JEE版本，工程导入后，请自行拷贝jstl.jar 和 standard.jar到WEB-INF/lib目录，如果没有配置Server的话，down个tomcat在eclipse里配置一下，不然怎么 run？这个基础的应该都会吧)</p>
<p>下载地址： <a href="http://jihao-repository.googlecode.com/files/Paging.zip">Paging.zip</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.haojii.com/2008/10/servlet-jsp-paging/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

