JavaWeb基于Bootstrap搭建漂亮的前台页面（实现分页）

最新推荐文章于 2023-10-21 17:50:18 发布

orzdh

最新推荐文章于 2023-10-21 17:50:18 发布

阅读量1.1k

点赞数 1

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/jiulanyangyang/article/details/108372641

版权

JavaWeb 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1、先看下效果吧
在这里插入图片描述

2、看下后台传过来的（基于Mybatis的PageHelper实现的分页，传给前端为PageInfo，不知道怎么使用的见我文章如何使用Mybatis的PageHelper分页工具）数据为

PageInfo{pageNum=1, pageSize=8, size=8, startRow=1, endRow=8, total=10, pages=2, 
list=Page{count=true, pageNum=1, pageSize=8, startRow=0, endRow=8, total=10, pages=2, reasonable=true, pageSizeZero=false}
[Employee{EID='1', ENAME='employee01', EEMAIL='employee01@qq.com', ESEX=1, EPHOME='13107897081', 
HIREDATE=Sun Aug 30 00:00:00 CST 2020, DID=0, dept=Dept{DID=1, DNAME='研发部', DLOC='厦门'}}, 
Employee{EID='10', ENAME='employee10', EEMAIL='employee10@qq.com', ESEX=1, EPHOME='13107897082', 
HIREDATE=Sun Aug 30 00:00:00 CST 2020, DID=0, dept=Dept{DID=1, DNAME='研发部', DLOC='厦门'}},
 Employee{EID='2', ENAME='employee02', EEMAIL='employee02@qq.com', ESEX=1, EPHOME='13107897082', 
 HIREDATE=Sun Aug 30 00:00:00 CST 2020, DID=0, dept=Dept{DID=2, DNAME='测试部', DLOC='广州'}}, 
 Employee{EID='3', ENAME='employee03', EEMAIL='employee03@qq.com', ESEX=1, EPHOME='13107897081',
 HIREDATE=Sun Aug 30 00:00:00 CST 2020, DID=0, dept=Dept{DID=1, DNAME='研发部', DLOC='厦门'}},
 Employee{EID='4', ENAME='employee04', EEMAIL='employee04@qq.com', ESEX=1, EPHOME='13107897082', 
 HIREDATE=Sun Aug 30 00:00:00 CST 2020, DID=0, dept=Dept{DID=4, DNAME='实施部', DLOC='南京'}},
 Employee{EID='5', ENAME='employee05', EEMAIL='employee05@qq.com', ESEX=1, EPHOME='13107897081', 
 HIREDATE=Sun Aug 30 00:00:00 CST 2020, DID=0, dept=Dept{DID=5, DNAME='人事部', DLOC='西藏'}},
 Employee{EID='6', ENAME='employee06', EEMAIL='employee06@qq.com', ESEX=1, EPHOME='13107897082', 
 HIREDATE=Sun Aug 30 00:00:00 CST 2020, DID=0, dept=Dept{DID=1, DNAME='研发部', DLOC='厦门'}}, 
 Employee{EID='7', ENAME='employee07', EEMAIL='employee07@qq.com', ESEX=1, EPHOME='13107897081', 
 HIREDATE=Sun Aug 30 00:00:00 CST 2020, DID=0, dept=Dept{DID=1, DNAME='研发部', DLOC='厦门'}}],
 prePage=0, nextPage=2, isFirstPage=true, isLastPage=false, hasPreviousPage=false, hasNextPage=true, 
 navigatePages=7, navigateFirstPage=1, navigateLastPage=2, navigatepageNums=[1, 2]}

3、（第一种方法）引入Bootstrap相关的插件（可见官网）
在这里插入图片描述

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

（第二种方法）去官网下载下来，然后引用也是可以的
在这里插入图片描述

    <script type="text/javascript"
            src="<c:url value='/static/js/jquery-1.12.4.min.js'/>"></script>
    <link
            href="<c:url value='/static/bootstrap-3.3.7-dist/css/bootstrap.min.css'/>"
            rel="stylesheet">
    <script
            src="<c:url value='/static/bootstrap-3.3.7-dist/js/bootstrap.min.js'/>"></script>

建议使用第一种，避免本地资源引用错误，导致不能用。

具体怎么使用 Bootstrap 自己去查官网文档
给出整个页面的代码

<%--
  Created by IntelliJ IDEA.
  User: orz
  Date: 2020/9/1
  Time: 23:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>人事管理</title>



    <!-- 最新版本的 Bootstrap 核心 CSS 文件-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入）-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    

</head>
<body>

<div class="container">
    <!--标题-->
    <div class="row">
        <div class="col-md-12"><h1>SSM-人事管理</h1></div>
    </div>
    <!--按钮-->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>
    <!--数据格-->
    <div class="row">
        <div class="col-md-12">
            <TABLE class="table table-hover">
                <tr>
                    <td>#</td>
                    <td>姓名</td>
                    <td>邮箱</td>
                    <td>性别</td>
                    <td>手机</td>
                    <td>入职时间</td>
                    <td>部门</td>
                    <td>操作</td>
                </tr>
                <c:forEach items="${pageinfo.list}" var="emp">
                <tr class="success">
                    <td >${emp.EID}</td>
                    <td>${emp.ENAME}</td>
                    <td>${emp.EEMAIL}</td>
                    <td>${emp.ESEX=="1"?"男":"女"}</td>
                    <td>${emp.EPHOME}</td>
                    <td>
                        <fmt:formatDate type="both" value="${emp.HIREDATE}"/>
                    </td>
                    <td>${emp.dept.DNAME}</td>
                    <td>
                        <button class="btn-primary btn-xs">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</button>
                        <button class="btn-danger btn-xs">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button>
                    </td>
                </tr>
                </c:forEach>
            </TABLE>
        </div>
    </div>
    <!--分页-->
    <div class="row">
        <!--分页文字信息-->
        <div class="col-md-6">
            当前第${pageinfo.pageNum} 页 总共${pageinfo.pages} 页  总共${pageinfo.total}条记录
        </div>
        <!--分页栏信息-->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <c:if test="${pageinfo.hasPreviousPage==true}">
                    <li><a href="<c:url value='/emps/emp?pn=1'/>">首页</a></li>
                    </c:if>
                    <c:if test="${pageinfo.hasPreviousPage==true}">
                    <li>
                        <a href="<c:url value='/emps/emp?pn=${pageinfo.pageNum-1}'/>" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    </c:if>
                    <c:forEach items="${pageinfo.navigatepageNums}" var="num">
                        <!--当前页高亮-->
                        <c:if test="${num==pageinfo.pageNum}">
                            <li class="active"><a href="#">${num}</a></li>
                        </c:if>
                        <!--非当前页无高亮-->
                        <c:if test="${num!=pageinfo.pageNum}">
                            <li><a href="<c:url value='/emps/emp?pn=${num}'/>">${num}</a></li>
                        </c:if>
                    </c:forEach>
                    <c:if test="${pageinfo.hasNextPage==true}">
                    <li>
                        <a href="<c:url value='/emps/emp?pn=${pageinfo.pageNum+1}'/>" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    </c:if>
                    <c:if test="${pageinfo.hasNextPage==true}">
                    <li><a href="<c:url value='/emps/emp?pn=${pageinfo.pages}'/>">尾页</a></li>
                    </c:if>
                </ul>
            </nav>
        </div>
    </div>

</div>
</body>
</html>

orzdh

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb基于Bootstrap搭建漂亮的前台页面（实现分页）

1、先看下效果吧2、看下后台传过来的（基于Mybatis的PageHelper实现的分页，传给前端为PageInfo，不知道怎么使用的见我文章如何使用Mybatis的PageHelper分页工具）数据为PageInfo{pageNum=1, pageSize=8, size=8, startRow=1, endRow=8, total=10, pages=2, list=Page{count=true, pageNum=1, pageSize=8, startRow=0, endRow=8, tot
复制链接

扫一扫