<%@ page contentType=”text/html;charset=UTF-8” language=”java” %>




    <%
    pageContext.setAttribute(“path”,request.getContextPath());
    %>



    ${path} <%— /SSM —%>
    <%—搭建页面—%>

    <%—标题—%>


    SSM-CRUD




    <%—按钮—%>

    <%—列偏移—%>




    <%—显示表格数据—%>



















    ID 姓名 性别 邮箱 部门 操作
    1 张三 男 zhangsan@163.com 工程部





    <%—显示分页信息—%>

    <%—分页，信息条—%>

    分页显示信息

    <%—分选，点选条—%>








    <%—引入jQuery—%>

    <%—引入BootStrap样式—%>



    		 
    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    3. <html>
    4. <head>
    5.     <title>员工信息查询</title>
    6. <%
    7.     pageContext.setAttribute("path",request.getContextPath());
    8. %>
    10. </head>
    11. <body>
    12. ${path}<%-- /SSM --%>
    13. <%--搭建页面--%>
    14. <div class="container">
    15.     <%--标题--%>
    16.     <div class="row">
    17.         <div class=".col-lg-12">
    18.             <h1>SSM-CRUD</h1>
    19.         </div>
    20.     </div>
    21.         <%--按钮--%>
    22.     <div class="row ">
    23.         <div class="col-md-4 col-md-offset-8"><%--列偏移--%>
    24.             <button type="button" class="btn btn-success">新增</button>
    25.             <button type="button" class="btn btn-danger">删除</button>
    26.         </div>
    27.     </div>
    28.         <%--显示表格数据--%>
    29.     <div class="row ">
    30.         <div class="col-md-12">
    31.             <table class="table table-hover">
    32.                 <tr>
    33.                     <th>ID</th>
    34.                     <th>姓名</th>
    35.                     <th>性别</th>
    36.                     <th>邮箱</th>
    37.                     <th>部门</th>
    38.                     <th>操作</th>
    39.                 </tr>
    40.                 <tr>
    41.                     <th>1</th>
    42.                     <th>张三</th>
    43.                     <th>男</th>
    44.                     <th>zhangsan@163.com</th>
    45.                     <th>工程部</th>
    46.                     <th>
    47.                         <button class="btn btn-primary">
    48.                             <span class="glyphicon glyphicon-pencil btn-xs" aria-hidden="true"></span>
    49.                             编辑
    50.                         </button>
    51.                         <button class="btn btn-danger">
    52.                             <span class="glyphicon glyphicon-trash btn-xs" aria-hidden="true"></span>
    53.                             删除
    54.                         </button>
    55.                     </th>
    56.                 </tr>
    57.             </table>
    58.         </div>
    59.     </div>
    61.     <%--显示分页信息--%>
    62.     <div class="row ">
    63.         <%--分页，信息条--%>
    64.         <div class="col-md-6">
    65.             分页显示信息
    66.             </div>
    67.         <%--分选，点选条--%>
    68.         <div class="col-md-6">
    69.             <nav aria-label="Page navigation">
    70.                 <ul class="pagination">
    71.                     <li>
    72.                         <a href="#">首页</a>
    73.                     </li>
    74.                     <li>
    75.                         <a href="#" aria-label="Previous">
    76.                             <span aria-hidden="true">&laquo;</span>
    77.                         </a>
    78.                     </li>
    79.                     <li><a href="#">1</a></li>
    80.                     <li><a href="#">2</a></li>
    81.                     <li><a href="#">3</a></li>
    82.                     <li><a href="#">4</a></li>
    83.                     <li><a href="#">5</a></li>
    84.                     <li>
    85.                         <a href="#" aria-label="Next">
    86.                             <span aria-hidden="true">&raquo;</span>
    87.                         </a>
    88.                     </li>
    89.                     <li>
    90.                         <a href="#">末页</a>
    91.                     </li>
    92.                 </ul>
    93.             </nav>
    94.         </div>
    96.     </div>
    97. </div>
    100.     <%--引入jQuery--%>
    101.     <script type="text/javascript" src="${path}/static/script/jquery-1.7.2.js"></script>
    102.     <%--引入样式--%>
    103.     <link href="${path}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    104.     <script src="${path}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    105. </body>
    106. </html>