一个通用的分页模板,注意表单的id设为f1,可自行更改。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript">
//跳到第i页
function gotoPage(i)
{
//将当前页和页大小参数加到表单中,表单的id要求必须是f1
var currentForm = document.getElementById("f1");
var currentPage = document.getElementById("currentPage");
currentPage.value=i;
currentForm.appendChild(currentPage);
var pageSize = document.getElementById("pageSize");
currentForm.appendChild(pageSize);
currentForm.submit(); //通过JS提交表单
}
</script>
<input id="currentPage" type="hidden" name="currentPage" value="1">
<ul class="pagination">
<li onclick="gotoPage(1)"><span>首页</span></li>
<c:choose>
<c:when test="${page.pageNum > 1}">
<li onclick="gotoPage(${page.pageNum - 1})"><span>上一页</span></li>
</c:when>
<c:otherwise><li class="disabled"><span>上一页</span></li></c:otherwise>
</c:choose>
<c:if test="${page.pageNum > 3 }">
<li class="disabled"><span>...</span></li>
</c:if>
<c:if test="${page.pageNum > 2 }">
<li onclick="gotoPage(${page.pageNum - 2 })"><a href="javascript:;">${page.pageNum - 2 }</a></li>
</c:if>
<c:if test="${page.pageNum > 1 }">
<li onclick="gotoPage(${page.pageNum - 1 })"><a href="javascript:;">${page.pageNum - 1 }</a></li>
</c:if>
<li class="active"><span>${page.pageNum }</span></li>
<c:if test="${page.pages - page.pageNum > 0 }">
<li onclick="gotoPage(${page.pageNum + 1 })"><a href="javascript:;">${page.pageNum + 1 }</a></li>
</c:if>
<c:if test="${page.pages - page.pageNum > 1 }">
<li onclick="gotoPage(${page.pageNum + 2 })"><a href="javascript:;">${page.pageNum + 2 }</a></li>
</c:if>
<c:if test="${page.pages - page.pageNum > 2 }">
<li class="disabled"><span>...</span></li>
</c:if>
<c:choose>
<c:when test="${page.pageNum < page.pages}">
<li onclick="gotoPage(${page.pageNum + 1})"><span>下一页</span></li>
</c:when>
<c:otherwise><li class="disabled"><span>下一页</span></li></c:otherwise>
</c:choose>
<li onclick="gotoPage(${page.pages})"><span>末页</span></li>
<li><span>共${page.pages}页,总共${page.total}条记录</span></li>
<li><span>每页显示
<select id="pageSize" name="pageSize" onchange="gotoPage(1)">
<option value="5">5</option>
<option selected="selected" value="10">10</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
条记录</span></li>
</ul>
<script>
//让每页大小展示选中的值
var pageSize = ${page.pageSize};
var allOptions = document.getElementById("pageSize").options;
for (i=0; i<allOptions.length; i++){
if (allOptions[i].value == pageSize)
{
allOptions[i].selected = true;
}
}
</script>