jstl 通用分页

分页效果如下:

< 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";
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值