构建自己的通用分页组件（下）

   在阅读本文之前，请先参考： 构建自己的通用分页组件（上） 。

1. 需求：

   在前一篇文章中，我们通过分析常见的分页需求，构建了一个通用的分页类Page和页面范围类PageScope，在此基础上完成了分页查询的前后台交互。但是取得当前页面的数据及其他分页页码信息后，最终还是要展示到页面上。
   一种常用的方法就是将分页查询后返回的page对象传递给页面，页面通过一些判断逻辑来进行相应的展示。但是这种方式不方便复用，即使将其单独独立出来，并在需要分页的页面分别导入，也不是很好的做法，因为在页面中写判断逻辑总是不太合适的。
   本文将以Jsp为例，使用Jsp的自定义标签，来实现一个页面分页标签处理程序，最终使得在需要分页的页面中能够简单、容易的复用。

2. 设计：
   首先我们来预览一下我们需要实现的功能，如下图：

   为使设计更加灵活，从上述图片中，我们可以将这新展示内容抽象为：首页、末页、上一页、下一页、当前页、当前页之前的页数、当前页之后的页数、页码的链接地址、展示样式、分页信息等。而且，我们希望这些参数可由调用者自由设置，并根据调用者提供的参数不同，进行不同的展示，譬如：

   根据这种实际需求，我们在PageTag类中定义如下属性：

public class PageTag extends TagSupport {

    private static final long serialVersionUID = 3441235160861303080L;
    // 首页
    private String homePage;
    // 末页
    private String lastPage;
    // 上一页
    private String previousPage;
    // 当前页之前的页数，默认为4。
    private int beforeNum = 4;
    // 当前页之后的页数，默认为5。
    private int afterNum = 5;
    // 分页对象
    private Page page;
    // 链接地址
    private String url;
    // 下一页
    private String nextPage;
    // 当前页码
    private String pageIndex;
    // 页面大小
    private String pageSize;
    // 外层div样式
    private String divClass;
    // 是否进行动态补足，默认为true。
    private boolean supplement = true;
}

   从上面的代码中可以看出，除了我们之前描述的需求外，我还定义了当前页码和页面大小的Url参数，这样做是为了可以在用户给定的Url后面动态加上当前页面页码及页面大小的参数。比如：用户设定的url链接为http://zhangshixi.iteye.com ，那么添加参数后的动态url为http://zhangshixi.iteye.com?pageIndex=6&pageSize=15 。另外，细心的读者还会发现，我们还定义了一个名为supplement的boolean型属性，用以标识是否对设定的当前页面之前和之后的页数进行动态补足。比如说：总页数为15页，当前为第2页，设定当前页之前显示4个页码，当前页之后显示5个页码，供10个页码。若不进行动态补足，将显示：1 2 3 4 5 6 7 这些页码，但若进行动态补足，由于前面页码不足，将从后面进行补充，反之亦然，那么补足后显示的页码将为：1 2 3 4 5 6 7 8 9 10 。

 

3. 实现：
   通过上面的分析和设计，下面我们继承Jsp提供的自定义标签TagSupport来实现自定义我们的分页标签PageTag。通过重写父类TagSupport的doStartTag()和doEndTag()方法，并在此方法中实现分页处理逻辑。

/**
 * 标签处理开始，构造一个存放分页信息的字符串缓冲区。
 * @return SKIP_BODY，忽略标签之间的内容。
 * @throws javax.servlet.jsp.JspException Jsp异常。
 */
@Override
public int doStartTag() throws JspException {
    buff = new StringBuilder();
    return SKIP_BODY;
}

/**
 * 标签实际分页处理逻辑。
 * @return EVAL_PAGE，按正常的流程继续执行Jsp页面。
 * @throws javax.servlet.jsp.JspException Jsp异常。
 */
@Override
public int doEndTag() throws JspException {
    if (page == null) {
        log.info("page is null.");
        return EVAL_PAGE;
    }

    // 写入开始DIV
    writeBeginDiv();
    // 写入分页信息
    writePageInfo();
    // 写入结束DIV
    writeEndDiv();
    // 记录日志
    writeDebugLog();
    // 输出到页面
    printToPage();

    return EVAL_PAGE;
}

    然后我们在分别完成各个子方法的实现即可。下面略举一二，最后将所有代码一并奉上。

/**
 * 写入实际的分页信息。
 * 调用者可自行设定是否显示首页、末页、上一页、下一页
 * 以及当前页面之前和之后的页数、是否进行动态补足等。
 */
private void writePageInfo() {
    int beforeCount = countBefore();
    int afterCount = countAfter();

    // 如果定义了动态补足，则对当前页之前和之后的页数进行动态补足。
    if (supplement) {
        beforeCount = fixBeforeCount(beforeCount, afterCount);
        afterCount = fixAfterCount(beforeCount, afterCount);
    }

    int index = page.getPageIndex();
    // 首页
    writeHomePage(index);
    // 上一页
    writePreviousPage(index);
    // 当前页之前的页码
    writeBeforePageIndex(index, beforeCount);
    // 当前页
    writeCurrentPageIndex(index);
    // 当前页之后的页码
    writeAfterPageIndex(index, afterCount);
    // 下一页
    writeNextPage(index);
    // 末页
    writeLastPage(index);
}

/**
 * 计算当前页之前的页数。
 * @return 当前页之前的页数。
 */
private int countBefore() {
    int beforeCount = 0;
    if (page.getPageIndex() - 1 > beforeNum) {
        beforeCount = beforeNum;
    } else {
        beforeCount = page.getPageIndex() - 1;
    }

    return beforeCount;
}

/**
 * 动态补足当前页之前的页数。
 * @param beforeCount 当前页之前的页数。
 * @param afterCount 当前页之后的页数。
 * @return 修正后的当前页之前的页数。
 */
private int fixBeforeCount(int beforeCount, int afterCount) {
    int totalNum = beforeNum + afterNum + 1;
    int useNum = beforeCount + afterCount + 1;

    if (useNum < totalNum) {
        int befores = page.getPageIndex() - 1;
        int margin = befores - beforeCount;
        if (margin > 0) {
            int needNum = totalNum - useNum;
            beforeCount += margin > needNum ? needNum : margin;
        }
    }

    return beforeCount;
}

/**
 * 写入首页信息，如果设定了显示首页。
 * @param index 当前页码。
 */
private void writeHomePage(int index) {
    if (homePage == null || homePage.isEmpty()) {
        return;
    }

    buff.append(LABEL_START);
    int homeIndex = 1;
    if (index > homeIndex) {
        writeUrlPageIndex(homeIndex, page.getPageSize(), homePage);
    } else {
        buff.append(homePage);
    }
    buff.append(LABEL_END);
}

/**
 * 写入当前页之前的页码。
 * @param index 当前页码。
 * @param beforeCount 前页之前的页数。
 */
private void writeBeforePageIndex(int index, int beforeCount) {
    int beginIndex = index - beforeCount < 0 ? 1 : index - beforeCount;
    for (int i = beginIndex; i < index; i++) {
        buff.append(LABEL_START);
        writeUrlPageIndex(i, page.getPageSize(), String.valueOf(i));
        buff.append(LABEL_END);
    }
}

/**
 * 将分页信息输入到页面上。
 */
private void printToPage() {
    try {
        pageContext.getOut().write(buff.toString());
    } catch (IOException ex) {
        log.error(ex.getMessage(), ex);
    }
}

 

4. 测试：
   针对此分页标签的实现，写了一个简单的测试代码来测试其正确性，如下：

public class PageTagTest {

    @Test
    public void writePage() throws JspException {
        PageTag instance = new PageTag();

        Page page = new Page(7, 10);
        page.setTotalData(75);

        instance.setPage(page);
        instance.setDivClass("divClass");
        instance.setHomePage("首页");
        instance.setLastPage("末页");
        instance.setPreviousPage("上一页");
        instance.setNextPage("下一页");
        instance.setPageIndex("page");
        instance.setBeforeNum(4);
        instance.setAfterNum(5);
        instance.setSupplement(false);
        instance.setUrl("http://zhangshixi.iteye.com");

        instance.doStartTag();
        instance.doEndTag();
    }
}

   最终写入到Jsp页面的内容如下：

<div class="divClass">
    <label><a href="http://zhangshixi.iteye.com?page=1">首页</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=6">上一页</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=3">3</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=4">4</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=5">5</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=6">6</a></label>
    <span>7</span>
    <label><a href="http://zhangshixi.iteye.com?page=8">8</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=9">9</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=10">10</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=11">11</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=12">12</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=8">下一页</a></label>
    <label><a href="http://zhangshixi.iteye.com?page=12">末页</a></label>
</div>

   限于篇幅，这里仅略举一例，当然，你也可写通过修改测试代码，来测试更多参数组合。至于在页面的最终展示样式，您可通过在外部css中，提供一个外层div的样式divClass来自行设定。在上传的代码中我会上传一个css的样式定义，来实现像本文开始时提供的效果，仅供参考，读者可在自己实际的项目中自行实现。

5. 如何使用？
   好了，通过上面的说明，我们已经详细介绍了分页标签的设计及实现，那么我们究竟如何将其使用在页面中呢？下面我讲意义说明：
首先，我们需要对自定义标签处理程序提供一个page-tag.tld配置文件，它定义了该标签的使用规则，参数规范等。如：

<?xml version="1.0" encoding="UTF-8"?>
<taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd">

    <tlib-version>1.0</tlib-version>
    <short-name>util</short-name>
    <uri>http://www.codingfarmer.com/tags</uri>
    <tag>
        <description>分页标签</description>
        <name>page</name>
        <tag-class>com.codingfarmer.util.page.PageTag</tag-class>
        <body-content>empty</body-content>
        <attribute>
            <description>首页</description>
            <name>homePage</name>
            <required>false</required>
            <rtexprvalue>true</rtexprvalue>
            <type>java.lang.String</type>
        </attribute>
        <attribute>
            <description>分页对象</description>
            <name>page</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
            <type>com.codingfarmer.util.page.Page</type>
        </attribute>
        ........
    </tag>
</taglib>  

   限于篇幅，上面只略举了两个属性的定义，其余原理同上。在上传的源码中会有详细的配置，请下载参考。
   其次，在定义好自定义标签的配置文件后，我们还需要在web.xml中引入，如将去放到WEB-INF下，并在web.xml中配置如下：

<jsp-config>
    <taglib>
        <taglib-uri>pageTag</taglib-uri>
        <taglib-location>/WEB-INF/page-tag.tld</taglib-location>
    </taglib>
</jsp-config>

    最后，在需要分页的页面中我们可以插入以下代码，并根据实际需要设置相应的属性即可，如：

// 引入page-tag.tld文件的定义
<%@ taglib uri=" http://www.codingfarmer.com/tags" prefix="util" %>

// 分页显示
<util:page url="http://zhangshixi.iteye.com" page="${page}" 
           pageIndex=”pageIndex” homePage=”首页” lastPage=”末页” 
           previousPage="Previous" nextPage="Next" className="pageNav" />

   最终在页面上生成的分页效果为：

6. 相关说明：
   至此，我们已经完成了一个通用的分页组件的设计与实现，这样，我们就可以将其收录到自己的工具箱中，使用时在项目中引入即可，从而大大简化了分页的处理及展示，也达到了良好的复用，简化了维护。
   下面上传的压缩包中，包含了自定义分页标签处理程序，测试类，还提供了一个仅供参考的css分页样式定义。还望大家哪呢个提出更好的建议和意见，以便改进，不胜感激。

评论

50 楼 cnzhenghui 2015-12-20  

楼主做的挺好的 下面有的朋友  想的太多  楼主这个才是真正的“通用”

49 楼 longer042 2011-01-12  

chenld 写道

建议点击下一页时, 提交表单, 不应是链接方式

必须是提交表单。否则 分页带多个参数会很痛苦，不通用

48 楼 joknm 2010-12-21  

这样的分页如果加有条件查询而且查询的内容是中文的话那就杯具了。

应该改成Form提交分页，将所有的查询条件信息保存到Form的hidden域中，这样就可以以POST形式提交了。

47 楼 qingfeng_101 2010-12-21  

哈哈 我的博客已经写好了，有空去看看吧。

46 楼 qingfeng_101 2010-12-17  

呵呵！不错的东西。不过，还有很多地方待改进。所以呢，我借鉴并使用楼主的思想与方法，重写并实现了更强大的分页功能。目前呢，该项目已经完成。主要改进之处有：1、增加了javascript方式提交 2、实现了页码顺序倒序排列 3、重写并实现了大量的计算方法。当然了，项目更复杂了。具体结果，等我准备好了放到博客里，敬请等待。因为项目的使用说明还在准备中。。。。^_^

45 楼 wangyu1221 2010-11-21  

我的好像没这么复杂，就把所有页码放到一个下拉框里，再把当前页弄成选定项。

如果同时显示连续的10个页码，比如总共100页，当前第10页 ，我想跳到50页怎么搞搞？有些网站就是这样我不得不一个个点，每次翻10页翻下去。

另外我觉得带参数的翻页可以用js来搞，直接把当前的参数放在页面上的hidden域里。

我就是这么瞎搞的，啊哈哈哈~

44 楼 senton 2010-11-18  

提交页码的同时，如何提交查询表单的数据？

43 楼 指尖帝 2010-11-17  

楼主 我test了一下，报TLD中没有className这个属性。但是去掉这个属性后，jsp页面可以解析，但是没有任何相关的代码生成。。。。

42 楼 wpfwupengfeiwpf 2010-08-11  

<div class="quote_title">finalerboy 写道</div>
<div class="quote_div">
<div class="quote_title">zhangshixi 写道</div>
<div class="quote_div">
<div class="quote_title">finalerboy 写道</div>
<div class="quote_div">
<div class="quote_title">zhangshixi 写道</div>
<div class="quote_div">
<div class="quote_title">finalerboy 写道</div>
<div class="quote_div">你说的这些都只是分页的参数。<br>我问的是页面的查询条件，<br>还请多指教。</div>
<br>已发站内信给你，如还有什么不懂，可站内信和我交流，谢谢。</div>
<br>我所说的参数/查询条件是指表单的条件：<br>如关键字，性别，地区。。。。<br>这些您是在ACTION中如何处理的。如果在你的PAGE类中，再有一个PARAMETER MAP或者PARAMETER LIST这样的东西封装存放这些参数，再丢到DAO里就好了。<br>不知道建议是否合理？</div>
<p>我觉得不是很有必要，当然你那样做也可以。<br>比如：我要在url上添加查询参数，性别gender，地区area，其实在这里我只需要将这两个参数传递到页面，再连接到url中即可。</p>
<pre name="code" class="java">&lt;util:page url="http://zhangshixi.iteye.com?gender=${gender}&amp;area=${area}"   /&gt;   </pre>
<p>按你那样做也可：如：</p>
<pre name="code" class="java">Map&lt;String, String&gt; params = new HashMap&lt;String, String&gt;(4);
params.put("gender","Boolean.TRUE.toString()");
params.put("area","ShangHai");
page.setParameters(params);</pre>
<p>在page中再解析此参数列表即可。道理一样，依个人所好选择吧。</p>
<p> </p>
</div>
<p> </p>
<p> </p>
<p>是的。就是想要这样的。</p>
<p> </p>
<p>因为发现您的此分页文章上下篇都没有提到页面查询参数的封装以及传递。 觉得还是不够完善。</p>
<p> </p>
<p>所以提出此想法，非常感谢您能仔细耐心回答。</p>
<p> </p>
<p>THX</p>
<p> </p>
</div>
<p><br>个人觉得建议蛮不错的，如果在搜索条件比较多的情况下，在链接上拼字符串好象是件挺烦人的事情</p>

41 楼 finalerboy 2010-06-07  

<div class="quote_title">zhangshixi 写道</div>
<div class="quote_div">
<div class="quote_title">finalerboy 写道</div>
<div class="quote_div">
<div class="quote_title">zhangshixi 写道</div>
<div class="quote_div">
<div class="quote_title">finalerboy 写道</div>
<div class="quote_div">你说的这些都只是分页的参数。<br>我问的是页面的查询条件，<br>还请多指教。</div>
<br>已发站内信给你，如还有什么不懂，可站内信和我交流，谢谢。</div>
<br>我所说的参数/查询条件是指表单的条件：<br>如关键字，性别，地区。。。。<br>这些您是在ACTION中如何处理的。如果在你的PAGE类中，再有一个PARAMETER MAP或者PARAMETER LIST这样的东西封装存放这些参数，再丢到DAO里就好了。<br>不知道建议是否合理？</div>
<p>我觉得不是很有必要，当然你那样做也可以。<br>比如：我要在url上添加查询参数，性别gender，地区area，其实在这里我只需要将这两个参数传递到页面，再连接到url中即可。</p>
<pre name="code" class="java">&lt;util:page url="http://zhangshixi.iteye.com?gender=${gender}&amp;area=${area}"   /&gt;   </pre>
<p>按你那样做也可：如：</p>
<pre name="code" class="java">Map&lt;String, String&gt; params = new HashMap&lt;String, String&gt;(4);
params.put("gender","Boolean.TRUE.toString()");
params.put("area","ShangHai");
page.setParameters(params);</pre>
<p>在page中再解析此参数列表即可。道理一样，依个人所好选择吧。</p>
<p> </p>
</div>
<p> </p>
<p> </p>
<p>是的。就是想要这样的。</p>
<p> </p>
<p>因为发现您的此分页文章上下篇都没有提到页面查询参数的封装以及传递。 觉得还是不够完善。</p>
<p> </p>
<p>所以提出此想法，非常感谢您能仔细耐心回答。</p>
<p> </p>
<p>THX</p>
<p> </p>

40 楼 davepkxxx 2010-06-07  

分页一般都是get请求啊

39 楼 zhangshixi 2010-06-07  

<div class="quote_title">finalerboy 写道</div>
<div class="quote_div">
<div class="quote_title">zhangshixi 写道</div>
<div class="quote_div">
<div class="quote_title">finalerboy 写道</div>
<div class="quote_div">你说的这些都只是分页的参数。<br>我问的是页面的查询条件，<br>还请多指教。</div>
<br>已发站内信给你，如还有什么不懂，可站内信和我交流，谢谢。</div>
<br>我所说的参数/查询条件是指表单的条件：<br>如关键字，性别，地区。。。。<br>这些您是在ACTION中如何处理的。如果在你的PAGE类中，再有一个PARAMETER MAP或者PARAMETER LIST这样的东西封装存放这些参数，再丢到DAO里就好了。<br>不知道建议是否合理？</div>
<p>我觉得不是很有必要，当然你那样做也可以。<br>比如：我要在url上添加查询参数，性别gender，地区area，其实在这里我只需要将这两个参数传递到页面，再连接到url中即可。</p>
<pre name="code" class="java">&lt;util:page url="http://zhangshixi.iteye.com?gender=${gender}&amp;area=${area}"   /&gt;   </pre>
<p>按你那样做也可：如：</p>
<pre name="code" class="java">Map&lt;String, String&gt; params = new HashMap&lt;String, String&gt;(4);
params.put("gender","Boolean.TRUE.toString()");
params.put("area","ShangHai");
page.setParameters(params);</pre>
<p>在page中再解析此参数列表即可。道理一样，依个人所好选择吧。</p>
<p> </p>

38 楼 zhangshixi 2010-06-07  

leepengyu 写道

想问一下LZ代码的这种字体叫什么名字？

NetBeans字体：DialogInput 16

37 楼 finalerboy 2010-06-07  

zhangshixi 写道

finalerboy 写道

你说的这些都只是分页的参数。
我问的是页面的查询条件，
还请多指教。

已发站内信给你，如还有什么不懂，可站内信和我交流，谢谢。

我所说的参数/查询条件是指表单的条件：

如关键字，性别，地区。。。。

这些您是在ACTION中如何处理的。如果在你的PAGE类中，再有一个PARAMETER MAP或者PARAMETER LIST这样的东西封装存放这些参数，再丢到DAO里就好了。

不知道建议是否合理？

36 楼 zhangshixi 2010-06-07  

finalerboy 写道

你说的这些都只是分页的参数。
我问的是页面的查询条件，
还请多指教。

已发站内信给你，如还有什么不懂，可站内信和我交流，谢谢。

35 楼 finalerboy 2010-06-07  

你说的这些都只是分页的参数。

我问的是页面的查询条件，


还请多指教。

34 楼 zhangshixi 2010-06-07  

<div class="quote_title">finalerboy 写道</div>
<div class="quote_div">
<p>ACTION里获取的参数，你怎么丢到dao查询。？</p>
<p>谢谢</p>
</div>
<p>我想你还是没理解我的意思吧？其实，我在第一篇文章中的“如何使用？”中已经将前后台如何交流page，讲的很清楚了。</p>
<p>前台调用者（就像你现在说的Action，但并非都是Action）构造一个page对象，如<span><span>Page page = </span><span class="keyword">new</span><span> Page(</span><span class="number">3</span><span>, </span><span class="number">15</span><span>);代表查询第3页，15条数据</span></span>，这里我们假设查询用户信息，那么后台方法根据传递过来的page对象，先统计出所有用户的总数，比如：100，然后设置数据总量：page.setTotalData(100)，此方法将自动完成相关分页信息的计算，如计算总共有多少页，当前第几页，当前页的起始行和结束行，还剩余多少页等。这样我们就得到了分页的信息。这是其一。</p>
<p>其二，查询指定页面的用户数据。这时利用持久层的相关技术实现即可。如mysql：select * from user u limit 45,15;查询用户数据列表并返回即可。</p>
<p>如再不明白，抱歉，希望你能自己动手写一下，并仔细思考下这个过程。再者，可站内信交流...</p>

33 楼 finalerboy 2010-06-07  

如果你的PAGE类有个PARAMETER MAP的东西就好了。

可以改进下。

32 楼 finalerboy 2010-06-07  

<div class="quote_title">zhangshixi 写道</div>
<div class="quote_div">
<div class="quote_title">finalerboy 写道</div>
<div class="quote_div">我还想知道。<br>Action里面怎么拼参数，怎么取SIZE，DAO里怎么取总。。。可否再详细一点？</div>
<p>1. action里不需要拼什么参数，只需要将需要的参数传递到页面，设置在page的url属性中即可。如：</p>
<p> </p>
<pre name="code" class="java">&lt;util:page url="http://zhangshixi.iteye.com?name=${name}&amp;age=${age}"   /&gt;</pre>
<p>2. 持久层在处理分页问题时，一般分两步：先是count出数据总量，然后查询调用者指定页面的数据列表。实现方式根据根据持久层选用的技术及数据库不同而不同。</p>
<p>在上一篇文章中，我已经介绍了，您可以参考下上一篇文章：<a title="构建自己的通用分页组件（上）" href="/topic/676906" target="_blank">构建自己的通用分页组件（上）</a></p>
</div>
<p> </p>
<p> </p>
<p>ACTION里获取的参数，你怎么丢到dao查询。？</p>
<p> </p>
<p>谢谢</p>

31 楼 zhangshixi 2010-06-07  

<div class="quote_title">finalerboy 写道</div>
<div class="quote_div"> 我还想知道。<br>Action里面怎么拼参数，怎么取SIZE，DAO里怎么取总。。。可否再详细一点？</div>
<p>1. action里不需要拼什么参数，只需要将需要的参数传递到页面，设置在page的url属性中即可。如：</p>
<p> </p>
<pre name="code" class="java">&lt;util:page url="http://zhangshixi.iteye.com?name=${name}&amp;age=${age}"   /&gt;</pre>
<p>2. 持久层在处理分页问题时，一般分两步：先是count出数据总量，然后查询调用者指定页面的数据列表。实现方式根据根据持久层选用的技术及数据库不同而不同。</p>
<p>在上一篇文章中，我已经介绍了，您可以参考下上一篇文章：<a title="构建自己的通用分页组件（上）" href="/topic/676906" target="_blank">构建自己的通用分页组件（上）</a></p>