其他分享
首页 > 其他分享> > 基于maven+ssm的增删改查之带分页的显示员工相关信息(基于bootstrap)

基于maven+ssm的增删改查之带分页的显示员工相关信息(基于bootstrap)

作者:互联网

接上一节。

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:forward page="/emps"></jsp:forward>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>跳转员工列表页面</title>
</head>
<body>
</body>
</html>

启动服务器之后,会默认访问index.jsp,在index.jsp中会请求"/emps",即EmployeeController.java中的getEmps方法:

    @RequestMapping("/emps")
    public String getEmps(@RequestParam(value="pn",defaultValue="1") Integer pn,
            Model model) {
        PageHelper.startPage(pn,5);
        List<Employee> emps = employeeService.getAll();
        PageInfo<Employee> page = new PageInfo<>(emps,5);
        model.addAttribute("pageInfo", page);
        return "list";
    }

在该方法中,传入一个参数pn,用于显示第N页,默认pn=1,我们通过PageHelper插件进行分页操作。

PageHelper.startPage:传入两个参数,第一个是从第几页开始显示,第二个参数是每页显示的条数。

当我们查询出所有的员工信息之后,可以利用PageInfo进行包装,PageInfo插入两个参数:第一个是相关信息,第二个参数是显示几页。

之后我们利用Model,将page装进pageInfo中,传给视图页面views文件夹下的list.jsp。

list.jsp

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%
    pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
</head>
<body>
    <div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-md-12">
                <h1>SSM-CURD</h1>
            </div>
        </div>
        <!-- 按钮-->
        <div class="row">
            <div class="col-md-4 col-md-offset-10">
                <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>
                        <th>#</th>
                        <th>epmName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                    <c:forEach items="${pageInfo.list}" var="emp">
                        <tr>
                            <th>${emp.empId}</th>
                            <th>${emp.empName}</th>
                            <th>${emp.gender =="M"?"男":"女"}</th>
                            <th>${emp.email}</th>
                            <th>${emp.dept.deptName}</th>
                            <th>
                                <button class="btn btn-primary btn-sm ">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    编辑
                                </button>
                                <button class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                    删除
                                </button>
                            </th>
                        </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}">
                      <li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
                    <li>
                      <a href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                  </c:if>
                    <c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
                        <c:if test="${page_Num == pageInfo.pageNum}">
                            <li class="active"><a href="#">${page_Num}</a></li>
                        </c:if>
                        <c:if test="${page_Num != pageInfo.pageNum}">
                            <li><a href="${APP_PATH}/emps?pn=${page_Num}">${page_Num}</a></li>
                        </c:if>
                    </c:forEach>
                    <c:if test="${pageInfo.hasNextPage }">
                    <li>
                      <a href="${APP_PATH}/emps?pn=${pageInfo.pageNum + 1}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                    <li><a href="${APP_PATH}/emps?pn=${pageInfo.pages}">末页</a></li>
                    </c:if>
                  </ul>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>

说明:

(1)引入<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

(2)我们引入静态资源时,首先自定义APP_PATH来获得项目路径,最后整个静态资源比如bootstrap路径就是:

/curd_ssm/static/bootstrap-3.3.7-dist/css/bootstrap.min.css

(3)我们从后端传过来的pageInfo对象中可以取得员工信息,也可以取得分页信息。取得员工信息时,首先取得里面的员工集合pageInfo.list,并取别名为emp,再取相应的属性。取分页信息时,直接使用pageInfo对象即可。

(4)使用分页时,参考bootstrap模板。需要注意的有:

启动服务器之后,输入localhost:8080/curd_ssm/,会先转到index.jsp页面,而index.jsp会请求/emps,跳转到list.jsp,

此时,是第一页,因此不显示上一页和首页,我们点击第二页。

此时首页和第一页就显示了,同理对于下一页和末页。

至此,基于bootstrap+分页的信息显示就完成了。下一节返回视图改为通过json来进行数据传输。 

标签:基于,bootstrap,page,ssm,jsp,emps,pn,pageInfo,emp
来源: https://www.cnblogs.com/xiximayou/p/12236690.html