第一种类型的分页
enter description here
条件如下
- 最多显示5页（可动态调整）
- 后台返回总页数
pages - 后台返回当前页
currentPage - 当前页不能点击再次请求
- 第一页时上一页功能禁用
- 最后一页时下一页功能禁用
jsp 界面代码
1 根据pages 、 currentPage 计算界面要显示的从开始到结束的页码放入数组中
<%
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的个数，默认五个
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 语法限制循环只能从1开始，因此不得已使用了数组
pageNumList
相关链接
第二种类型的分页
enter description here
enter description here
enter description here
enter description here
条件如下
- 后台返回总页数
totalPage - 后台返回当前页
targetPage - 第一页和最后一页必须显示（没有除外）
- 当前页的前三页和后三页也需要显示
- 当前页前/后多于三页（除去首末页）的使用
...代替 - 当前页不能点击
- 第一页时上一页
a标签禁用 - 最后一页时下一页
a标签禁用
1 根据totalPage 、 targetPage 计算界面要显示的从开始到结束的页码以及所有数据放入数组中
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界面拿出数据进行展示，具体的跳转处理流程需要根据项目需要
<%@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 = "确定跳转">
</div>
</td>
</tr>
</table>
</body>
</html>
网友评论