JavaWeb：（九）分页

程序员aDing

已于 2022-06-28 23:11:01 修改

阅读量137

点赞数

分类专栏： Java后端开发技术栈文章标签： servlet java 前端

于 2022-06-28 02:29:37 首次发布

本文链接：https://blog.csdn.net/sd_960614/article/details/125494908

版权

Java后端开发技术栈专栏收录该内容

61 篇文章 3 订阅

订阅专栏

分页的基本原理就是通过一个当前页面变量pageNum来控制数据库要查询的数据，然后将查询到的数据进行显示即可。

pageNum维护在session中，每一次请求显示的页面需要基于当前的pageNum，显示上一页则pageNum = pageNum - 1，显示下一页则pageNum = pageNum + 1；pageNum需要一个默认初始值，这个默认初始值在访问首页的时候设置。

Servlet代码：

package servlet;

import impl.FruitDAOImpl;
import pojo.Fruit;
import util.JDBCUtils;
import util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.sql.Connection;
import java.util.List;

@WebServlet("/index")
public class IndexServlet extends ViewBaseServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        // 默认初始化页数为第1页
        int pageNum = 1;

        HttpSession session = request.getSession();
        String keyword = null;

        //通过oper参数判断是不是在搜索框中进行关键词搜索显示
        String operStr = request.getParameter("oper");
        if(StringUtils.isNotEmpty(operStr) && "search".equals(operStr)){
            keyword = request.getParameter("keyword");
            //空置搜索框，则关键字置为""，与不输入关键字显示效果一致
            if (StringUtils.isEmpty(keyword)){
                keyword = "";
            }
            session.setAttribute("keyword", keyword);
        } else {
            String pageNumStr = request.getParameter("pageNum");
            if (StringUtils.isNotEmpty(pageNumStr)){
                pageNum = Integer.parseInt(pageNumStr);
            }
            //若关键字字段不为空，则说明当前页面基于关键字搜索而来，翻页的内容都基于搜索的结果进行显示
            Object keywordObj = session.getAttribute("keyword");
            if (keywordObj != null){
                keyword = (String) keywordObj;
            } else {
                keyword = "";
            }
        }

        //将pageNum存入session作用域，表示当前页面是第几页，其他request请求的页数基于当前页
        session.setAttribute("pageNum", pageNum);

        Connection connection = null;
        try {
            connection = JDBCUtils.getConnection();
            FruitDAOImpl fruitDAO = new FruitDAOImpl();
            List<Fruit> fruitList = fruitDAO.getPage(connection, pageNum, keyword);
            Long count = fruitDAO.getCount(connection, keyword);

            // 根据数据库记录条数计算最大页数，用于前端页面“尾页”按钮
            session.setAttribute("maxPage", (count + 4) / 5);
            session.setAttribute("fruitList", fruitList);

            super.processTemplate("index", request, response);

        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            JDBCUtils.closeResource(connection, null);
        }
    }
}

HTML代码：

<html xmlns:th="http://www.thymeleaf.org">
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="css/index.css">
      <script type="text/javascript" src="js/fruit.js"></script>
   </head>
   <body>
      <div id="div_container">
         <div id="div_fruit_list">
            <p class="center f30">简易的水果管理系统</p>
            <div id="add_fruit">
               <form action="index" method="post" style="float: left">
                  <input type="hidden" name="oper" value="search">
                  请输入查询关键字：<input type="text" name="keyword" th:value="${session.keyword}">
                  <input type="submit" class="btn" value="查询">
               </form>
               <a th:href="@{/add.html}" style="float: right">添加水果</a>
            </div>
            <table id="tbl_fruit">
               <tr>
                  <th class="w20">名称</th>
                  <th class="w20">单价</th>
                  <th class="w20">数量</th>
                  <th class="w20">备注</th>
                  <th>操作</th>
               </tr>
               <tr th:if="${#lists.isEmpty(session.fruitList)}">
                  <td colspan="4">对不起，库存为空！</td>
               </tr>
               <tr th:unless="${#lists.isEmpty(session.fruitList)}" th:each="fruit : ${session.fruitList}">
                  <!--<td><a th:href="@{'edit.do?id='+${fruit.id}}" th:text="${fruit.name}">苹果</a></td>-->
                  <td><a th:href="@{/edit.do(id=${fruit.id})}" th:text="${fruit.name}">苹果</a></td>
                  <td th:text="${fruit.price}">5</td>
                  <td th:text="${fruit.fcount}">20</td>
                  <td th:text="${fruit.remark}">这里是备注</td>
                  <td><img src="imgs/del.jpg" class="delImg" th:onclick="|delFruit(${fruit.id})|"/></td>
               </tr>
            </table>
            <div style="width: 60%; margin-left: 20%; text-align: center; border: 0px solid red; margin-top: 5px">
                  <input type="button" class="btn" value="首页" th:onclick="page(1)" th:disabled="${session.pageNum == 1}">
                  <input type="button" class="btn" value="上一页" th:onclick="|page(${session.pageNum - 1})|" th:disabled="${session.pageNum <= 1}">
                  <input type="button" class="btn" value="下一页" th:onclick="|page(${session.pageNum + 1})|" th:disabled="${session.pageNum >= session.maxPage}">
                  <input type="button" class="btn" value="尾页" th:onclick="|page(${session.maxPage})|" th:disabled="${session.pageNum == session.maxPage}">
            </div>
         </div>
      </div>
   </body>
</html>

JavaScript代码：

function delFruit(id){
    if(confirm("确定删除词条记录？")){
       window.location.href = "del.do?id=" + id;
    }
}

function page(pageNum){
    window.location.href = "index?pageNum=" + pageNum;
}