web项目精美分页工具类 (Bootstrap样式) 源码【拿去使用】

最新推荐文章于 2024-08-06 07:40:50 发布

hah杨大仙

最新推荐文章于 2024-08-06 07:40:50 发布

阅读量1.6k

点赞数 2

分类专栏： JAVA 前端样式---Bootstrap 文章标签： bootstrap 前端 html spring java

本文链接：https://blog.csdn.net/m0_55710969/article/details/121347904

版权

JAVA 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

前端样式---Bootstrap

3 篇文章 0 订阅

订阅专栏

我们在做web项目时，经常要使用分页。在这里分享给大家博主使用Bootstrap样式做的分页工具类。（效果如图所示，附上源码及使用方式，无需再每次手动编写）

效果展示

例（当位于首页时）：

分页工具类的源代码如下：

工具类源码

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="btn-group">

    <c:if test="${pg.total==0}">
        <i>暂无数据</i>
    </c:if>

    <c:if test="${pg.total!=0}">
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#" active>共 ${pg.total} 条信息</a>
            </li>
        </ul>
        <input type="number" name="pageSize" value="${pg.pageSize}" placeholder="每页显示" style="width: 88px">
        <button class="btn btn-outline-primary" type="submit">确定</button>
        &emsp;
        <c:if test="${pg.pageNum!=1}">
            <button type="button" class="btn btn-outline-primary" onclick="goPage(1)">首页</button>
        </c:if>
        <button type="button" class="btn btn-outline-primary" onclick="goPage(${pg.prePage==0?1:pg.prePage})">&laquo;
        </button>
        <c:forEach items="${pg.navigatepageNums}" var="n">
            <button type="button" class="btn btn-outline-primary" onclick="goPage(${n})">${n}</button>
        </c:forEach>
        <button type="button" class="btn btn-outline-primary" onclick="goPage(${pg.nextPage==0?pg.pages:pg.nextPage})">
            &raquo;
        </button>
        <c:if test="${pg.pageNum!=pg.pages}">
            <button type="button" class="btn btn-outline-primary" onclick="goPage(${pg.pages})">尾页</button>
        </c:if>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#">合计：${pg.pageNum}/${pg.pages}页</a>
            </li>
        </ul>
        <input type="number" name="pageNum" placeholder="跳转至..." style="width: 88px">
        <button class="btn btn-outline-primary" type="submit">跳转</button>
    </c:if>

</div>

如何使用

第一步：导入分页工具类（当然jQuery与Bootstrap不能少，需搭配使用）

项目结构如图所示：这里使用的是bootstrap-5.1.0，及jQuery3.6.0。附上对应官网获取链接。

jQuery官网：jQuery
官网下载链接：Bootstrap · The most popular HTML, CSS, and JS library in the world.
官网在线API文档：Introduction · Bootstrap v5.1
中文API使用文档：简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网

若无法获取资源可私信博主获取

第二步：在所要使用的页面页眉导入对应资源标签

如图所示：（附上代码）

<head>
    <title>Title</title>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="resources/bootstrap-5.1.0-dist/css/bootstrap.css">
    <script type="text/javascript" src="resources/js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="resources/bootstrap-5.1.0-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="resources/My97DatePicker/WdatePicker.js"></script>
</head>

在需要使用分页处引入工具类

<jsp:include page="/resources/page/pages2.jsp"></jsp:include>

需嵌套在表单结构中，表单提交(action的参数值)路径为你的列表路径。

若想使该分页工具居中，则只需利用 table-->tr 标签的 align='center' 属性即可。

合并单元格 colspan='16'，具体请参考上图。

对应的 javascript 函数；

  function goPage(pageNum) {
      $("[name='pageNum']").val(pageNum);
      $("form").submit();
  }

第三步：后台代码（对应表单提交方法）

控制层（controller）对应的方法代码如下：（初始值可通过defaultValue修改）

对应的service层代码如下：

所导的包：

对应的Maven依赖（若使用的是jar包则导入对应的jar包即可）：

        <!-- mybaits pagehelper 分页助手 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>${pagehelper-version}</version>
        </dependency>

到此我们的分页工具就可以正常使用啦，祝大家玩的开心！