美文网首页
2018-07-02分页底航栏优化

2018-07-02分页底航栏优化

作者: 晒太阳的小乳牛 | 来源:发表于2018-07-02 11:06 被阅读0次

    6月30号的那个底航栏有些丑,今天用bootstrap框架给他美化了一些

    studentlist.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%@ page import="test.*" %>
    <%@ page isELIgnored="false" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
      <script type="text/javascript">
    
     function topage(currentpage) {
      var form = document.forms[0];
      form.currentpage.value = currentpage;
      form.submit();
     }
    </script>
    
      </head>
    
      <body>
      <form>
       <input type="hidden" name="currentpage" />
        <table align="center" style="width: 60%;" class="table table-hover"">
        <thead>
           <tr>
             <th>学生编号</th>
             <th>学生姓名</th>
             <th>学生年龄</th>
             <th>学生性别</th>
             <th>学生生日</th>
           </tr>
           </thead>
          <c:forEach items="${requestScope.list}" var="list">
          <tbody>
           <tr>
                <td>${list.id }</td>
                <td>${list.name }</td>
                <td>${list.age }</td>
                <td>${list.sex }</td>
                <td>${list.birth}</td>        
           </tr>
           </tbody>
          </c:forEach>
    
       </table>
       <div align="center" >
       <nav>
       <ul class="pagination"><!-- 前端框架控制导航条 -->
      <c:forEach begin="${pageView.startindex}" end="${pageView.endindex}" var="wp">
       <c:if test="${pageView.currentpage==wp}">
        <li class="active"><a>${wp}</a></li><!-- 前端框架控制导航条 -->
       </c:if>
       <c:if test="${pageView.currentpage!=wp}">
        <li><a href="javascript:topage('${wp}')">${wp}</a></li><!-- 前端框架控制导航条 -->
       </c:if>
      </c:forEach>
             <!-- ${pageView.totalrecordnumber}  本来他写错了 -->
             <li><a>总共${pageView.totalpagenumber}页</a></li><!-- 前端框架控制导航条 -->
           </ul>       
       </nav>    
        </div>
      </form>
    
      </body>
    </html>
    
    显示效果: 1.png

    结束!

    相关文章

      网友评论

          本文标题:2018-07-02分页底航栏优化

          本文链接:https://www.haomeiwen.com/subject/wtikuftx.html