分页效果如下:
< 1 2 3 4 ... 11 >
< 1 ... 3 4 5 6 7 8 9 ... 11 >
< 1 ... 7 8 9 10 11 >
按钮动作js,需要引入到待分页页面
通用分页jsp :pager.jsp:
需要分页的页面引入,其中需要更改 formName变量的值为当前页面的form
pager 类,可以自行补充 startItem endItem 等变量和方法,方便数据库查询
Controller: spring mvc pager 作为参数方便前后台传递当前页 currentPage
< 1 2 3 4 ... 11 >
< 1 ... 3 4 5 6 7 8 9 ... 11 >
< 1 ... 7 8 9 10 11 >
按钮动作js,需要引入到待分页页面
function gotoPage(formName, pageNum){
var pageInputName = "currentPage";
var pageInput = null;
var form = document.getElementsByName(formName)[0];
if(document.getElementsByName(pageInputName).length != 0){
pageInput = document.getElementsByName(pageInputName)[0];
pageInput.value = pageNum;
}else{
pageInput = document.createElement("input");
pageInput.type = "hidden";
pageInput.name = "currentPage";
pageInput.value = pageNum;
form.appendChild(pageInput);
}
form.submit();
}
通用分页jsp :pager.jsp:
<div class="jogger">
<c:if test="${pager.currentPage>1 }">
<a href="javascript:gotoPage('${formName }', ${pager.currentPage-1})">
<</a>
</c:if>
<c:if test="${pager.currentPage==1 }">
<a href="#"> <</a>
</c:if>
<a <c:if test="${pager.currentPage==1}"> class="current" </c:if>
href="javascript:gotoPage('${formName}', '1');">1</a>
<c:if test="${pager.totalPage!=1}">
<c:choose>
<c:when test="${pager.currentPage<=5}">
<c:forEach var="i" begin="2" end="${pager.currentPage}">
<a <c:if test="${pager.currentPage==i}"> class="current" </c:if>
href="javascript:gotoPage('${formName }', ${i});">${i }</a>
</c:forEach>
</c:when>
<c:otherwise>
...
<c:forEach var="i" begin="${pager.currentPage-3}"
end="${pager.currentPage}">
<a <c:if test="${pager.currentPage==i}"> class="current" </c:if>
href="javascript:gotoPage('${formName}', ${i});">${i }</a>
</c:forEach>
</c:otherwise>
</c:choose>
<c:choose>
<c:when
test="${pager.currentPage>=pager.totalPage-4
|| pager.totalPage-4<=0}">
<c:forEach var="i" begin="${pager.currentPage+1}"
end="${pager.totalPage}">
<a <c:if test="${pager.currentPage==i}"> class="current" </c:if>
href="javascript:gotoPage('${formName}', ${i});">${i }</a>
</c:forEach>
</c:when>
<c:otherwise>
<c:forEach var="i" begin="${pager.currentPage+1}"
end="${pager.currentPage+3}">
<a <c:if test="${pager.currentPage==i}"> class="current" </c:if>
href="javascript:gotoPage('${formName}', ${i});">${i }</a>
</c:forEach>
...
<a
<c:if test="${pager.currentPage==pager.totalPage}"> class="current" </c:if>
href="javascript:gotoPage('${formName }', ${pager.totalPage});">
${pager.totalPage}</a>
</c:otherwise>
</c:choose>
</c:if>
<c:if test="${pager.currentPage < pager.totalPage}">
<a href="javascript:gotoPage('${formName}', ${pager.currentPage+1})">></a>
</c:if>
<c:if test="${pager.currentPage == pager.totalPage}">
<a href="#">></a>
</c:if>
</div>
需要分页的页面引入,其中需要更改 formName变量的值为当前页面的form
<c:set var="formName" value="queryListForm"/>
<%@ include file="common/page.jsp"%>
pager 类,可以自行补充 startItem endItem 等变量和方法,方便数据库查询
public class Pager {
private int currentPage = 1;
private int totalItem;
private int pageSize = 20;
public int getTotalPage() {
if (totalItem % pageSize > 0) {
return (totalItem / pageSize) + 1;
} else {
return (totalItem / pageSize);
}
}
public int getTotalItem() {
return totalItem;
}
public void setTotalItem(int totalItem) {
this.totalItem = totalItem;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
}
Controller: spring mvc pager 作为参数方便前后台传递当前页 currentPage
@RequestMapping("list")
public String list(Pager pager,ModelMap model) {
int totalItem = queryService.getTotalItem();
pager.setTotalItem(totalItem);
//可以设置页面大小也可用默认的
pager.setPageSize(10);
List<Order> orderList = queryService.query();
model.put("pager",pager);
model.put("orderList",orderList);
return "downloadList";
}