Java后台及Jsp前端的简单分页_学习笔记

在你需要导出显示大量列表时，在一页中都显示出来，是不美观页不实用的。在这种时候，就需要设置一个分页来显示你的内容，如百度的分页：

分页分为：前段分页和后端分页

后端分页：

首先我们应该确定，我们要分页，都需要从哪得到哪些数据：

Page<T>类

在Servlet中得到：

int pageNumber   //当前页码 ， 该数据在Servlet中获取

int pageSize      //每页显示的条数 ， 在Servlet中指定

后期计算得到：

int index        // 分页开始的索引 ， 通过计算获得

int totalPage     // 总页数 ， 需要通过计算获得

从数据库中导出：

int totalRecord   // 总记录 ， 通过查询数据库获得

List<T> data;    // 分页的数据 ， 通过数据库查询

分页查询时，DAO、Service的分工

Service：

pageNumber

pageSize

DAO：

int totalRecord

List<T> data

下面是Page类，在这里声明了上面我们需要的6个数据中的4个，index、totalPage 2个需要计算得到的，我们就不在这里面声明了。这个page类可以拿过去直接使用的：

public class Page<T> {

    private int pageNumber;

    private int pageSize;

    private int totalRecord;

    private List<T> data;

    private String path;

    public Page(int pageNo, int pageSize, int totalRecord) {
        super();
        this.pageNumber = pageNo;
        this.pageSize = pageSize;
        this.totalRecord = totalRecord;
    }

    public int getPageNumber() {

            if(pageNumber < 1){
            return 1;
            }

            if(pageNumber > getTotalPage()){
                return getTotalPage();
            }

            return pageNumber;
        }

        public void setPageNumber(int pageNumber) {
            this.pageNumber = pageNumber;
        }

        public int getPageSize() {
            return pageSize;
        }

        public void setPageSize(int pageSize) {
            this.pageSize = pageSize;
        }

        public int getTotalPage() {

            if(getTotalRecord()%getPageSize()==0){
                return getTotalRecord()/getPageSize();
            }else{
                    return getTotalRecord()/getPageSize()+1;
            }
        }

        public int getTotalRecord() {
            return totalRecord;
        }

        public void setTotalRecord(int totalRecord) {
            this.totalRecord = totalRecord;
        }

        public int getIndex() {

            return (getPageNumber() - 1) * getPageSize();
        }

        public List<T> getData() {
            return data;
        }

        public void setData(List<T> data) {
            this.data = data;
        }

        public String getPath() {
            return path;
        }

        public void setPath(String path) {
            this.path = path;
        }

}

Servlet关键代码

protected void getStuList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String url = WebUtils.getPath(request);
        Page<Student> page=stuService.findAll(pageNo, pageSize);
        page.setPath(url);
        request.setAttribute("page",page );
        request.getRequestDispatcher("/studentList.jsp").forward(request, response);
    }

Dao关键代码：从数据库中导出 totalRecord  、List<T> data;

public static int getTotalRecord() {
        PreparedStatement ps=null;
        ResultSet rs = null;
        Connection conn = Utils.getConnection();
        String sql = " SELECT COUNT(*) AS total FROM student";
        int total=0;

        try {
            ps =conn.prepareStatement(sql);
            rs = ps.executeQuery();
            if(rs.next()){
                total =  rs.getInt("total");
            }
        } catch (SQLException e) {
//            e.printStackTrace();
        }finally{
            Utils.close(conn, ps, rs);
        }

        return total;
    }

    public List<Student> getLimitStuList(int index, int pageSize) {
        PreparedStatement ps=null;
        ResultSet rs = null;
        Connection conn = Utils.getConnection();
        String sql = " SELECT * FROM student limit ? , ?";
        List<Student> list= new ArrayList<Student>();
        try {
            ps =conn.prepareStatement(sql);
            ps.setInt(1, index);
            ps.setInt(2, pageSize);

            rs = ps.executeQuery();
            while(rs.next()){
                int id =  rs.getInt("id");
                String name = rs.getString("name");
                String school = rs.getString("school");
                double score = rs.getDouble("score");
                list.add(new Student(id,name,school,score));
            }
        } catch (SQLException e) {
//            e.printStackTrace();
        }finally{
            Utils.close(conn, ps, rs);
        }

        return list;
    }
      

这就是后端的一些关键代码，下面我们看下前段分页。

前段分页：这是一个JSP代码

百度是页里最多只显示10个页码

咱们设计为页面中最多显示5页码

这个问题就转变成了需要动态的设置forEach中begin和end的值

根据不同的情况去设置begin和end的值

第一种情况，总页数小于等于5

begin=1  end=总页数

第二种情况，当前页 小于等于 3

begin=1  end=5

第三种情况，当前页 大于3

lbegin=当前页-2   end=当前页+2

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ab/jquery.min.js"></script>
<div id="page_nav" align="center">
            <a href="${page.path}&pageNo=1">首页</a>
    <a href="${page.path}&pageNo=${page.pageNumber -1 }">上一页</a>
        <c:choose>
            <c:when test="${page.totalPage <= 5 }" >
                <c:set var="begin" value="1"></c:set>
                <c:set var="end" value="${page.totalPage}"></c:set>
            </c:when>
            <c:when test="${page.pageNumber <= 3 }">
                <c:set var="begin" value="1"></c:set>
                <c:set var="end" value="5"></c:set>
            </c:when>
            <c:otherwise>
                <c:set var="begin" value="${page.pageNumber-2}"></c:set>
                <c:set var="end" value="${page.pageNumber+2}"></c:set>
                <c:if test="${end > page.totalPage }">
                    <c:set var="begin" value="${page.totalPage-4}"></c:set>
                    <c:set var="end" value="${page.totalPage}"></c:set>
                </c:if>
            </c:otherwise>
        </c:choose>
        <c:forEach begin="${begin }" end="${end}" var="num">
            <c:if test="${page.pageNumber == num }">
                【${num}】
            </c:if>
            <c:if test="${page.pageNumber != num }">
                <a href="${page.path}&pageNo=${num}">${num }</a>
            </c:if>
        </c:forEach>
    <a href="${page.path}&pageNo=${page.pageNumber +1}">下一页</a>
    <a href="${page.path}&pageNo=${page.totalPage}">末页</a>
    共${page.totalPage }页，${page.totalRecord }条记录到,去第<input value="${page.totalPage }" name = "pn" id ="pn_input"/>页

    <input type="button" value="确定" id="btn_id"/>
    <script type="text/javascript">
        $("#btn_id").click(function(){
            var value= $("#pn_input").val();
            window.location="${page.path}&pageNo="+value;
        });
    </script>
</div>

上面的jsp可以直接用，直接加到你要导出显示的列表的下面：

<c:forEach items="${page.data}" var="stu">
                    <tr>
                        <td>${stu.name }</td>
                        <td>${stu.school }</td>
                        <td>${stu.score }</td>
                        <td><a href="${pageContext.request.contextPath}/FindAllServlet?method=toUpdatePage&id=${stu.id}" >修改</a></td>
                        <td><a href="#?${stu.id}">删除</a></td>
                    </tr>
                </c:forEach>
                <tr><td colspan="5" align="center"><a href="#">添加</a></td></tr>
            </table>
        <br/>
        <%@ include file="/Page.jsp" %>

但是要注意，一定要导入jar包和js包

运行结果：