2018-07-02分页底航栏优化
2018-07-02 本文已影响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
结束！
