通用分页模板

一个通用的分页模板，注意表单的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>