你肯定會敲分頁插件嗎？

時間 2021-04-11

標籤 html 前端 java web spring sql 數據庫後端框架 jsp 欄目 HTML 简体版

原文原文鏈接

前言：

最近在一些web進行練習，對我我的而言，web無非就是就是將後端數據庫的數據傳送到前端頁面上，前端再將接收到的數據進行遍歷渲染出來以供參考。我的感受仍是比較簡單的。對於這一部分的數據庫傳值，前端渲染這些後面會專門寫一期筆記以供參考。那麼本篇筆記呢。主要是針對我在以前的練習中遇到的一個偏難的點，什麼呢，那就是分頁技術。可能好多人都想。這有什麼難的，插件一搜一大把。可是我想說的是我本次所寫的分頁所使用的技術是原生js以及sevelt等基礎所寫。若有更好的，望留言分享。html

一：效果

首先來看下大體需求：前端

我在這裏設計的是每頁顯示五條數據，而後是總共多少頁，當前頁，跳轉到首頁以及尾頁，還有總共多少條數據等等。這些均可根據本身需求進行設計。java

二：實現思路

首先咱們須要確定的就是每頁顯示多少條數據。
而後從前端傳回一個當前頁。
根據當前頁進行數據庫查詢。
將查詢到的數據封裝到集合中。
將集合封裝到分頁對象中。
將分頁對象傳到前端。
前端進行數據渲染。

三：代碼實現

首先是html頁面。web

<table border="1">
            <tr>
                <td width="5%">
                    <input id="one" type="checkbox" value="">
                </td>
                <td>序號</td>
                <td>名稱</td>
                <td>描述</td>
                <td>添加時間</td>
                <td width="9%">操做</td>
            </tr>
            <form action="/roleDeleteBatches" method="post">
                <c:forEach items="${list}" var="user">
                    <tr>
                        <td><input class="two" type="checkbox"value="${user.r_id}" name="key"></td>
                        <td>${user.r_id}</td>
                        <td>${user.r_name}</td>
                        <td>${user.r_des}</td>
                        <td>${user.r_addTime}</td>
                        <td>
                            <a href="roleQuery?id=${user.r_id}" target="i">
                                <img src="../../image/alert-circle.png" width="20px" height="20px">
                            </a>&nbsp;
                            <a href="roleUpdate?id=${user.r_id}" target="i">
                                <img src="../../image/edit-2.png" width="20px" height="20px">
                            </a>&nbsp;
                            <a href="roleDelete?id=${user.r_id}">
                                <img src="../../image/delete2.png" width="20px" height="20px">
                            </a>
                        </td>
                    </tr>
                </c:forEach>
                //我寫的分頁當成了插件使用，因此須要引用
                <jsp:include page="../../pageInfo.jsp">
                    <jsp:param name="path" value="${pageContext.request.contextPath}/user/userManager"/>
                </jsp:include>

而後是插件頁面。spring

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>分頁</title>
</head>
<body>
<div style="float: left;width: 300px;">
    <span>總頁碼數:${pageModel.totalPage}</span>
    <span>當前頁：${pageModel.currentPage}</span>
    <sapn><a href="${param.path}?currentPage=1">首頁</a></sapn>
    <span>總記錄數:${pageModel.totalPage * 5}</span>//這裏因爲本人在測試，因此是將全部的頁數乘以5，有點問題，若是須要的話能夠增長一個變量
</div>
<div style="float: right;width: 300px">
    <c:choose>
        <c:when test="${pageModel.currentPage == 1}">
            <a>上一頁</a>
        </c:when>
        <c:otherwise>
            <a href="${param.path}?currentPage=${pageModel.currentPage -1}">上一頁</a>
        </c:otherwise>
    </c:choose>
    <c:forEach begin="${pageModel.beginPage}" end="${pageModel.endPage}" varStatus="status">
        <c:choose>
            <c:when test="${pageModel.currentPage == status.index}">
                <a style="color: green">${status.index}</a>
            </c:when>
            <c:otherwise>
                <a href="${param.path}?currentPage=${status.index}">${status.index}</a>
            </c:otherwise>
        </c:choose>
    </c:forEach>
    <c:choose>
        <c:when test="${pageModel.currentPage == pageModel.totalPage}">
            <a>下一頁</a>
        </c:when>
        <c:otherwise>
            <a href="${param.path}?currentPage=${pageModel.currentPage + 1}">下一頁</a>
        </c:otherwise>
    </c:choose>
    <span><a href="${param.path}?currentPage=${pageModel.totalPage}">尾頁</a></span>
</div>
</body>
</html>

接下來是severlet類（注意：因爲初學，因此將severce合併在了severlet裏面，若是有須要，能夠將邏輯提取出來）sql

@WebServlet("/userQueryAll")
public class UserQueryAllServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        String currentPage = request.getParameter("currentPage");
        int currNum = currentPage == null ? 1 : Integer.parseInt("currentPage");
        UserDaoImpl dao = new UserDaoImpl();
        List<User> list = dao.findAllUser(currNum);
        int count = dao.findAllUserCount();
        PageModel<User> page = new PageModel<User>(currNum, (count + 4 ) / 5, 11, list);
        request.getSession().setAttribute("pageModel", page);
        request.getRequestDispatcher("./Adminastrator/user/userManager.jsp").forward(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

而後是看下咱們的實體類，這裏解釋下，因爲生產set與get拉扯的代碼太長了，所以將變量寫出來以供你們參考，具體需求還需你們本身生成。數據庫

private int currentPage;// 當前頁
    private int beginPage;// 起始頁
    private int endPage;// 結束頁
    private int totalPage;// 總頁碼數
    private int pageNum;// 頁碼數
    private List<T> list;

分頁實體看完後還須要用戶的實體，這裏也作一個說明，每一個人的代碼不一樣，因此須要根據本身的實際狀況來肯定字段，本人寫的是僅供參考。後端

private Integer u_id;
    private String u_account;
    private String u_password;
    private String u_name;
    private Integer u_age;
    private String u_phone;
    private Integer u_status;

最後就是數據庫查詢（注意：我在這使用了spring框架中的beans架包，以及queryrunner類，若是看不懂請改爲jdbc嘗試）。框架

private QueryRunner qur = new QueryRunner(DBUtil.getDataSource());

public List<User> findAllUser(int currentPage) {
        String sql = "select * from user limit ?,5";
        List<User> list = null;
        try {
            list = qur.query(sql, new BeanListHandler<>(User.class), (currentPage - 1) * 5);
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return list;
    }
public int findAllUserCount() {
        String sql = "select * from user";
        try {
            List<User> query = qur.query(sql, new BeanListHandler<>(User.class));
            return query.size();
        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }
        return 0;
    }