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

tech2022-08-14 136

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相关的插件（可见官网）

<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">  <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">  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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>  <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">  <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">  <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">«</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">»</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>

最新回复(0)