第一種類型的分頁
enter description here
條件如下
- 最多顯示5頁（可動態(tài)調(diào)整）
- 后臺返回總頁數(shù)
pages - 后臺返回當前頁
currentPage - 當前頁不能點擊再次請求
- 第一頁時上一頁功能禁用
- 最后一頁時下一頁功能禁用
jsp 界面代碼
1 根據(jù)pages 、 currentPage 計算界面要顯示的從開始到結(jié)束的頁碼放入數(shù)組中
<%
int currentPage = (Integer)request.getAttribute("currentPage");
int pages = (Integer)request.getAttribute("pages");
int showPages = 5;
int midValue = showPages/2;
int begin = 1;
int end = showPages;
//展示page的個數(shù)，默認五個
int showedPageCount = showPages;
if (pages > showPages){
//前面不夠，從1開始，后面肯定夠
if(currentPage - midValue <=0){
end = showPages;
} else if(pages - currentPage < midValue){//后面不夠，前面肯定夠
begin = pages - showPages + 1;
} else{//兩個都夠
begin = currentPage -midValue;
end = currentPage +midValue;
}
} else {
end = pages;
showedPageCount = pages;
}
ArrayList<Integer> pageNumList = new ArrayList<Integer>();
for(int i = 0;i < showedPageCount;i++){
pageNumList.add(begin+i);
}
%>
2 使用Bootstrap 分頁插件布局分頁效果
<nav aria-label="Page navigation">
<ul class="pagination">
<li
<c:if test="${currentPage == 1}">class="disabled"</c:if>
>
<a
<c:if test="${currentPage != 1}">href="/cd/fileIndex/keywordSearch?pageNumStr=${currentPage - 1}&keyword=${keyword}"</c:if>
<c:if test="${currentPage == 1}">href="#"</c:if>
aria-label="Previous">
<span aria-hidden="true">上一頁</span>
</a>
</li>
<c:forEach items="<%=pageNumList %>" var="page" >
<c:choose>
<c:when test="${currentPage==page}">
<li class="active">
<span>${page}<span class="sr-only">(current)</span></span>
</li>
</c:when>
<c:otherwise>
<li ><a href="#" onclick="searchFileIndex(${page})">${page}</a></li>
</c:otherwise>
</c:choose>
</c:forEach >
<li
<c:if test="${currentPage == pages}">class="disabled"</c:if>
>
<a
<c:if test="${currentPage != pages}">href="/cd/fileIndex/keywordSearch?pageNumStr=${currentPage + 1}&keyword=${keyword}"</c:if>
<c:if test="${currentPage == pages}">href="#"</c:if>
aria-label="Next">
<span aria-hidden="true">下一頁</span>
</a>
</li>
</ul>
</nav>
注意事項
- 需要導入JSTL 頭引用
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> - 由于c:forEach 語法限制循環(huán)只能從1開始，因此不得已使用了數(shù)組
pageNumList
相關(guān)鏈接
第二種類型的分頁
enter description here
enter description here
enter description here
enter description here
條件如下
- 后臺返回總頁數(shù)
totalPage - 后臺返回當前頁
targetPage - 第一頁和最后一頁必須顯示（沒有除外）
- 當前頁的前三頁和后三頁也需要顯示
- 當前頁前/后多于三頁（除去首末頁）的使用
...代替 - 當前頁不能點擊
- 第一頁時上一頁
a標簽禁用 - 最后一頁時下一頁
a標簽禁用
1 根據(jù)totalPage 、 targetPage 計算界面要顯示的從開始到結(jié)束的頁碼以及所有數(shù)據(jù)放入數(shù)組中
public List<String> getPageShowList(int targetPage, int totalPage) {
int x = targetPage;
int m = totalPage;
List<String> pageShowList = new ArrayList<String>();
// 1_第1頁 ,...2_第2頁
if (x>5 && (m-x) >4) {
pageShowList.add(1 + "_第1頁");
pageShowList.add("...");
for (int i = (x-3); i <= (x + 3) ; i++) {
pageShowList.add( (i) + "_第" + (i) + "頁");
}
pageShowList.add("...");
pageShowList.add( (m) + "_第" + (m) + "頁");
}else if (x<=5 && (m-x) >4) {
for (int i = 1; i <= x; i++) {
pageShowList.add(i + "_第" + (i) + "頁");
}
pageShowList.add( (x+1) + "_第" + (x+1) + "頁");
pageShowList.add( (x+2) + "_第" + (x+2) + "頁");
pageShowList.add( (x+3) + "_第" + (x+3) + "頁");
pageShowList.add("...");
pageShowList.add( (m) + "_第" + (m) + "頁");
}else if (x>5 && (m-x) <=4) {
pageShowList.add(1 + "_第1頁");
pageShowList.add("...");
for (int i = (x-3); i <= m; i++) {
pageShowList.add(i + "_第" + (i) + "頁");
}
}else if (x <= 5 && (m-x) <= 4) {
for (int i = 1; i <= m; i++) {
pageShowList.add(i + "_第" + (i) + "頁");
}
}
return pageShowList;
}
2 jsp界面拿出數(shù)據(jù)進行展示，具體的跳轉(zhuǎn)處理流程需要根據(jù)項目需要
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript">
function jumpPage(currentPage,distance){
var stockName = document.getElementById("stockName");
var targetPage = 0;
targetPage = currentPage + (distance);
var url = '/Oracle-test/bid/bid/queryBidPageStock?targetPage='
+ targetPage +'&stockName='+stockName.value;
window.location.href = url;
}
function buttonClick(){
var stockName = document.getElementById("stockName");
var jumpPageInput = document.getElementById("jumpPageInput");
var url = '/Oracle-test/bid/bid/queryBidPageStock?targetPage='
+ jumpPageInput.value +'&stockName='+stockName.value;
window.location.href = url;
}
</script>
<body>
<table width="90%" border="0" cellspacing="2" cellpadding="3" align="center">
<tr bgcolor="f5f5f5">
<td colspan="6">
<div align="right">
當前第${targetPage}頁，共 ${totalPage}頁
</div>
</td>
</tr>
<tr bgcolor="f5f5f5">
<td colspan="6">
<div align="right">
<c:if test="${targetPage == 1}">上一頁</c:if>
<c:if test="${targetPage != 1}">
<a href="javascript:jumpPage(${targetPage},-1)">
上一頁</a>
</c:if>
<%
List<String> pageList = (List<String>)request.getAttribute("pageList");
if(pageList != null && pageList.size() > 0){
for (int i = 0 ; i < pageList.size(); i++){
String compstr = pageList.get(i);
if(compstr.contains("...")){
%>
<b>...</b>
<%
} else {
String[] comStrings = compstr.split("_");
String pageNumStr = comStrings[0];
Integer targetPage = (Integer)request.getAttribute("targetPage");
if(pageNumStr.equals(""+targetPage)){
%>
<b><%=comStrings[1]%></b>
<%
} else {
%>
<a href = "javascript:jumpPage(<%=pageNumStr%>,0)"><%=comStrings[1]%></a>
<%
}
}
}
}
%>
<c:if test="${targetPage == totalPage}">下一頁</c:if>
<c:if test="${targetPage != totalPage}">
<a href="javascript:jumpPage(${targetPage},+1)">下一頁</a>
</c:if>
到第<input type = "text" id = "jumpPageInput" value = "${targetPage}" size = "1"> 頁
<input type = "button" onclick="javascript:buttonClick()" value = "確定跳轉(zhuǎn)">
</div>
</td>
</tr>
</table>
</body>
</html>
