-
效果
微信公众号:JavaWeb架构师
测试代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table {
/*合并单元格*/
/*border-collapse: collapse;*/
/*border: 1px solid #000;*/
background-color: chocolate;
width: 800px;
text-align: center;
margin: 0 auto;
border-spacing: 1px;
margin-top: 200px;
}
table tr {
background-color: white;
}
.choose {
/*background-color: blue;*/
margin: 0 auto;
width: 260px;
/*background-color: aqua;*/
}
.choose input[type=text] {
width: 200px;
}
.choose select {
width: 205px;
}
.choose input[type=submit] {
float: right;
width: 60px;
margin-top: 10px;
font-size: 20px;
}
.pageDiv {
text-align: center;
margin-top: 100px;
}
</style>
<script type="text/javascript">
// 获取当前页(每一次点击都是一次请求,都会重新赋值的)
var currentPage = ${result.currentPage};
// 一共多少页数据
var totalPage = ${result.totalPage};
// 提交表单方法
function submitForm(actionUrl) {
var formElement = document.getElementById("studentSeacher");
// 设置action
formElement.action = actionUrl;
// 提交
formElement.submit();
}
// 第一页
function firstPage() {
if (currentPage == 1) {
alert("已经是第一页了");
return false;
} else {
// 提交数据,附加currentPage参数
submitForm("<%= request.getContextPath() %>/subListServlet?currentPage=1");
}
}
// 下一页
function nextPage() {
if( currentPage == totalPage) {
alert("已经是最后一页");
} else {
// 提交数据,附加currentPage参数
submitForm("<%= request.getContextPath() %>/subListServlet?currentPage=" + (currentPage+1));
}
}
// 上一页
function prevPage() {
if( currentPage == 1) {
alert("已经是第一页");
} else {
// 提交数据,附加currentPage参数
submitForm("<%= request.getContextPath() %>/subListServlet?currentPage=" + (currentPage-1));
}
}
// 最后一页
function endPage() {
if (currentPage == totalPage) {
alert("已经是最后一页了");
return false;
} else {
// 提交数据,附加currentPage参数
submitForm("<%= request.getContextPath() %>/subListServlet?currentPage=" + totalPage);
}
}
</script>
</head>
<body>
<%
if( request.getAttribute("result") != null ) {
System.out.println("result: " + request.getAttribute("result"));
}
%>
<form action="<%= request.getContextPath() %>/subListServlet" method="post" id="studentSeacher" >
<div class="choose">
姓名:
<!-- 可以在HTML标签中嵌套jsp标签等 -->
<!-- 上次输入的姓名是谁,提交之后仍然保留名字(为换页) -->
<input type="text" name="name" id="name" <c:if test="${parameter.name != null }"> value="${parameter.name }" </c:if> />
<br />
性别:
<select name="gender" id="gender">
<option value="-1">全部</option>
<!-- 判断上次选中的性别是谁,刷新之后仍然选中(为换页) -->
<option value="1" <c:if test="${parameter.gender == 1 }"> selected </c:if> >男</option>
<option value="2" <c:if test="${parameter.gender == 2 }"> selected </c:if> >女</option>
</select>
<br />
<input type="submit" value="查询"/>
</div>
</form>
<!-- 返回结果是空 -->
<c:if test="${fn:length(result.dataList) eq 0 }">
<span>没有结果</span>
</c:if>
<!-- 返回结果不是空 -->
<c:if test="${fn:length(result.dataList) gt 0 }">
<table>
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>住址</th>
</tr>
<!-- 遍历结果 -->
<c:forEach items="${result.dataList }" var="student">
<tr>
<td>
<c:out value="${student.name }"></c:out>
</td>
<td>
<c:if test="${student.gender == 1}">男</c:if>
<c:if test="${student.gender == 2}">女</c:if>
</td>
<td>
<c:out value="${student.age }"></c:out>
</td>
<td>
<c:out value="${student.address }"></c:out>
</td>
</tr>
</c:forEach>
</table>
</c:if>
<div class="pageDiv">
<br />
当前共${result.totalRecord }条记录,共${result.totalPage }页,当前第${result.currentPage }页
<a href="#" onclick="firstPage()">首页</a>
<a href="#" onclick="prevPage()">上一页</a>
<a href="#" onclick="nextPage()">下一页</a>
<a href="#" onclick="endPage()">尾页</a>
</div>
</body>
</html>
源码下载
关注下方的微信公众号,回复:java_div_page.code
网友评论