第 15 章 分页

注意

实际上分页并不属于jsp的基础知识范畴,不过分页毕竟是非常常用的一个功能,其中也会涉及到jsp的一些应用,所以还有很有价值一看的。

如果你不满足以下任一条件,请继续阅读,否则请跳过此后的部分,进入下一章:第 16 章 Never End...

  1. 了解如何进行数据库分页。

  2. 了解如何使用jstl标签替换分页的jsp代码。

15.1. 数据库分页

所谓的分页,就是要查询的数据太多了,一次性显示出来的话,既不容易查看也影响性能。

就比如我们这里有39条数据,分8页显示出来,每页5条记录。

首先说数据库,里边只有一张表bean,三个字段id, title和add_date。

-- bean
create table bean(
    id bigint, -- 主键
    title varchar(100), -- 标题
    add_date datetime -- 时间
);
        

对应的Bean.java咱们就不用写了,只看一看后台去数据库读取数据库的BeanServlet.java。

package anni;

import java.io.*;
import java.sql.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class BeanServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        Connection conn = null;
        Statement state = null;
        ResultSet rs = null;

        // 获得当前页码
        int pageNo = 1;
        try {
            pageNo = Integer.parseInt(request.getParameter("pageNo"));
        } catch(Exception ex) {
        }
        if (pageNo < 1) {
            pageNo = 1;
        }
        request.setAttribute("pageNo", pageNo);

        List list = new ArrayList();
        int count = 0;
        // 根据页码从数据库中获得对应的数据
        try {
            conn = DbUtils.getConn();
            state = conn.createStatement();

            rs = state.executeQuery("select limit " + (pageNo * 5 - 5) + " 5 * from bean");
            while (rs.next()) {
                Bean bean = new Bean();
                bean.setId(rs.getLong(1));
                bean.setTitle(rs.getString(2));
                bean.setAddDate(rs.getTimestamp(3));

                list.add(bean);
            }
            rs.close();

            rs = state.executeQuery("select count(*) from bean");
            if (rs.next()) {
                count = rs.getInt(1);
            }

        } catch(Exception ex) {
            ex.printStackTrace();
        } finally {
            DbUtils.close(rs, state, conn);
        }

        request.setAttribute("count", count);
        request.setAttribute("list", list);
        request.getRequestDispatcher("/query.jsp").forward(request, response);
    }
}
        

代码长了,分三段来看:

  1. // 获得当前页码
    int pageNo = 1;
    try {
        pageNo = Integer.parseInt(request.getParameter("pageNo"));
    } catch(Exception ex) {
    }
    if (pageNo < 1) {
        pageNo = 1;
    }
    request.setAttribute("pageNo", pageNo);
                    

    这里pageNo代表当前的页码,如果没有传递pageNo参数,默认显示第一页,为此我们在解析request中参数时要捕获对应的异常,如果没有输入或者参数不是一个数字时pageNo就还是等于1。

  2. rs = state.executeQuery("select limit " + (pageNo * 5 - 5) + " 5 * from bean");
                    

    这里我们拼了一个sql语句,用来从(pageNo * 5 - 5)开始查询五个记录,这条sql语句是hsqldb数据库特有的分页语句。

    (pageNo * 5 - 5)用来计算pageNo这页第一条记录的行号,如果是第一页pageNo = 1,pageNo * 5 - 5 = 0。这里的行号跟咱们平常使用的数组索引一样,0代表第一个条记录,这样我们第一页就会显示0,1,2,3,4五条记录。如果是第二页pageNo = 2,pageNo * 5 - 5 = 5,我们就会在第二页看到5,6,7,8,9五条记录。这样正好与我们预期的一致。

  3. rs = state.executeQuery("select count(*) from bean");
                    

    最后记得要获得数据库中一共有几条记录,我们要用它来计算一共要分几页。

    计算方法是count / 5 + 1,比如现在有39条记录,39 / 5 + 1 = 8,一共分8页。

经过BeanServlet.java的处理,request里有三个变量,list保存当前页面显示的结果,pageNo代表当前页码,count代表数据库中一共有多少条记录,这三个变量会在query.jsp中作为原始数据显示最终的结果。

            <tbody>
<%
    SimpleDateFormat format = new SimpleDateFormat("yyyy年MM月dd日");

    List list = (List) request.getAttribute("list");
    if (list != null && list.size() != 0) {
        for (int i = 0; i < list.size(); i++) {
            Bean bean = (Bean) list.get(i);
%>
                <tr class="<%=(i % 2 == 1 ? "odd" : "even")%>">
                    <td><%=bean.getId()%></td>
                    <td><%=bean.getTitle()%></td>
                    <td><%=format.format(bean.getAddDate())%></td>
                </tr>
<%
        }
    } else {
%>
                <tr>
                    <td colspan="3">没有数据</td>
                </tr>
<%
    }
%>
            </tbody>
        

循环显示list中当前页面的数据并不是新鲜事物,我们只是判断了list是否存在,list里是否有数据,如果这两个条件不符合,就显示“没有数据”作为提示。

下面是重头戏了,仔细研究一下如何使用pageNo(当前页码)和count(数据总数)显示出分页工具栏,虽然只是进行简单的四则运算,但要是平常不注意训练算法,想一次写好也不容易。

分页栏部分的代码如下:

        <div>
<%
    Integer pageNo = (Integer) request.getAttribute("pageNo");
    Integer count = (Integer) request.getAttribute("count");
    Integer pageCount = count / 5 + 1;
    if (pageNo == 1) {
%>
            <span class="unuse">[第一页]</span>
            <span class="unuse">[上一页]</span>
<%
    } else {
%>
            <span><a href="?pageNo=1">[第一页]</a></span>
            <span><a href="?pageNo=<%=pageNo - 1%>">[上一页]</a></span>
<%
    }
%>
<%
    for (int i = 1; i <= pageCount; i++) {
        if (i == pageNo) {
%>
            <span class="currentPage"><%=i%></span>
<%
        } else {
%>
            <span><a href="?pageNo=<%=i%>"><%=i%></a></span>
<%
        }
    }
%>
<%
    if (pageNo == pageCount) {
%>
            <span class="unuse">[下一页]</span>
            <span class="unuse">[最后一页]</span>
<%
    } else {
%>
            <span><a href="?pageNo=<%=pageNo + 1%>">[下一页]</a></span>
            <span><a href="?pageNo=<%=pageCount%>">[最后一页]</a></span>
<%
    }
%>
            <form style="display:inline;">
                <select name="pageNo">
<%
    for (int i = 1; i <= pageCount; i++) {
%>
                    <option value="<%=i%>" <%=(i == pageNo ? "selected" : "")%>><%=i%></option>
<%
    }
%>
                </select>
                <input type="submit" value="go" />
            </form>
        </div>
        

首先我们从request中取得pageNo(当前页码)和count(数据总数)两个变量,为了下面计算简便先用它俩计算出总页数 int pageCount = count / 5 + 1; 。

    if (pageNo == 1) {
%>
            <span class="unuse">[第一页]</span>
            <span class="unuse">[上一页]</span>
<%
    } else {
%>
            <span><a href="?pageNo=1">[第一页]</a></span>
            <span><a href="?pageNo=<%=pageNo - 1%>">[上一页]</a></span>
<%
    }
%>
        

这段代码生成“[第一页] [上一页]”,如果pageNo == 1说明当前页已经是第一页了,这时既不需要[第一页]这个链接,也不需要[上一页]了。对应的“[下一页] [最后一页]”处理方法与之类似,只是判断条件要写成pageNo == pageCount,判断是否已经是最后一页了。

<%
    for (int i = 1; i <= pageCount; i++) {
        if (i == pageNo) {
%>
            <span class="currentPage"><%=i%></span>
<%
        } else {
%>
            <span><a href="?pageNo=<%=i%>"><%=i%></a></span>
<%
        }
    }
%>
        

中间页码部分直接使用循环就能输出来,循环从i = 1开始直到i <= 8,最后就是我们看到的1,2,3,4,5,6,7,8。既然pageNo是从1开始算的,我们这里就也从i = 1起步了。如果在i == pageNo的时候,说明这是当前页,不需要链接,再加上一个class="currentPage"突出显示。

            <form style="display:inline;">
                <select name="pageNo">
<%
    for (int i = 1; i <= pageCount; i++) {
%>
                    <option value="<%=i%>" <%=(i == pageNo ? "selected" : "")%>><%=i%></option>
<%
    }
%>
                </select>
                <input type="submit" value="go" />
            </form>
        

这个select下拉选择框的实现与上面相似,循环一下,遇到i == pageNo的时候就输出一个selected默认显示到select里,在选中想跳转的页码,点击下面的go按钮提交,跳转的效果也前面的超链接相同。

范例在15-01。

15.2. 使用jstl改写分页

jsp的代码让人眼晕,我们现在把分页中所有的jsp代码都换成jstl标签,这些我们要导入三个标签:core,fmt,functions。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
        

其中core提供循环标签(forEach)和判断标签(if),fmt为我们格式化日期,functions可以判断list的长度。

使用它们,下面显示记录结果的代码最终变成这幅模样。

            <tbody>
<c:forEach var="item" items="${list}" varStatus="status">
  <c:set var="row" value="${status.index % 2 != 0 ? 'odd' : 'even'}"/>
                <tr class="${row}">
                    <td>${item.id}</td>
                    <td>${item.title}</td>
                    <td><fmt:formatDate pattern="yyyy年MM月dd日" value="${item.addDate}"/></td>
                </tr>
</c:forEach>
<c:if test="${empty list || fn:length(list) == 0}">
                <tr>
                    <td colspan="3">没有数据</td>
                </tr>
</c:if>
            </tbody>
        

forEach用来循环${list}中的内容,把每个元素保存到局部变量item中,供下面使用。

fmt:formatDate是专门用于日期格式化显示的标签,相当于我们刚刚在jsp中使用的SimpleDateFormat,pattern部分设置期望显示的日期格式,最后它就会把value中的${item.addDate}显示成“2008年04-01”的格式。

c:if也是一个非常常用的标签,它用来判断test=""中指定的el表达式的真假,如果是true就执行标签内部的内容,否则就跳过。很难受的是jstl中没有else的部分,想实现else必须写两次if两次test,很麻烦,但真就是jsp的局限。

fn:length(list)是functions标签部分为我们提供的扩展功能,因为el表达式中不能直接调用变量的方法,需要判断list长度的时候无法使用list.size(),只能通过fn:length(list)走一下弯路了,虽然它的功能十分有限,但也为我们提供了一条尽量不写jsp的途径,忍忍吧。

后面分页部分的功能随便帖一下就好,只是循环和判断的组合而已。

        <div>
<c:set var="pageCount" value="${count / 5 + 1}"/>
<c:if test="${pageNo == 1}">
            <span class="unuse">[第一页]</span>
            <span class="unuse">[上一页]</span>
</c:if>
<c:if test="${pageNo != 1}">
            <span><a href="?pageNo=1">[第一页]</a></span>
            <span><a href="?pageNo=${pageNo - 1}">[上一页]</a></span>
</c:if>
<c:forEach begin="1" end="${pageCount}" varStatus="status">
    <c:if test="${status.index == pageNo}">
            <span class="currentPage">${status.index}</span>
    </c:if>
    <c:if test="${status.index != pageNo}">
            <span><a href="?pageNo=${status.index}">${status.index}</a></span>
    </c:if>
</c:forEach>
<c:if test="${pageNo == pageCount}">
            <span class="unuse">[下一页]</span>
            <span class="unuse">[最后一页]</span>
</c:if>
<c:if test="${pageNo != pageCount}">
            <span><a href="?pageNo=${pageNo + 1}">[下一页]</a></span>
            <span><a href="?pageNo=${pageCount}">[最后一页]</a></span>
</c:if>
            <form style="display:inline;">
                <select name="pageNo">
<c:forEach begin="1" end="${pageCount}" varStatus="status">
                    <option value="${status.index}" ${status.index == pageNo ? 'selected' : ''}>${status.index}</option>
</c:forEach>
                </select>
                <input type="submit" value="go" />
            </form>
        </div>
        

这里可以看到forEach的另一种用法,begin="1"从i = 1开始循环,end="${pageCount}"会一直循环到i <= pageCount结束,这帮助我们实现简单循环,以后还可以使用varStatus="status"获得当前行号信息,这些变量最后都可以在循环体中使用到。

范例在15-02。