1. 效果
2. pagehelper版本的
2.1 引入相關jar 及配置分頁插件
<!-- 10. 分頁 pageHelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.4</version>
</dependency> javascript
<!-- 3.3 配置分頁插件 -->
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageHelper">
<property name="properties">
<value>
dialect=mysql
reasonable=true
</value>
</property>
</bean>
</array>
</property>css
2.2 後臺
2.2.1 controller
2.2.2 業務層
2.2.3 mapper
2.3 前端分頁（*）
目的：過多的狀況下用"......"代替html
| <%@ 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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>系統登陸日誌</title>
<%@ include file="../public/url.jsp" %>
<!--1.入門meta部分 爲了確保適當的繪製和觸屏縮放，須要在 <head> 之中添加 viewport 元數據標籤。-->
<!--initial-scale=1 是爲了保證頁面是流動式頁面 user-scalable=no 禁止頁面縮放功能-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--2.引入 bootstrap.min.css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<!--3.引入jQuery庫 必須在bootstrap庫以前 建議使用1.x版本的-->
<script src="js/jquery-2.1.4.min.js"></script>
<!--4.引入bootstrap庫-->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//1.分頁 將原來的get提交給位post提交
function pageTo(pageNum){
document.write("<form action='${pageContext.request.contextPath }/pageHelperFunction.action' method=post name=manageDepForm style='display:none'>");
document.write("<input type=hidden name='currentPage' value='"+pageNum+"'/>");//參數1
document.write("<input type=hidden name='pageSize' value='"+data.pageSize+"'/>");//參數2
document.write("</form>");
document.manageDepForm.submit();
}
</script>前端 </head>
<body>
<!--3. 顯示信息 -->
<table class="table table-bordered">
<thead>
<tr align="center" style="color: black;">
<td> <strong>序號</strong></td>
<td> <strong>操做帳號</strong></td>
<td> <strong>操做人</strong></td>
<td> <strong>管理員</strong></td>
<td> <strong>IP</strong></td>
<td> <strong>IP歸屬地</strong></td>
<td> <strong>網絡運營商</strong></td>
<td> <strong>訪問途徑</strong></td>
<td> <strong>瀏覽器類型</strong></td>
<td> <strong>操做系統</strong></td>
<td> <strong>登陸時間</strong></td>
<td><strong>狀態</strong></td>
</tr>
<tbody>
<c:forEach var="logs" items="${pb.list }" varStatus="status">
<td align="center">${pb.pageSize * (pb.pageNum - 1) + status.count}</td>
<td align="center"> admin</td>
<td align="center"><font style="color: red">admin</font></td>
<td align="center">
<c:if test="${logs.isadmin =='0'}">
是
</c:if>
<c:if test="${logs.isadmin =='1'}">
否
</c:if>
</td>
<td align="center">${logs.ip}</td>
<td align="center">${logs.city}</td>
<td align="center">${logs.isp}</td>
<td align="center">${logs.visitType}</td>
<td align="center">${logs.browser}</td>
<td align="center">${logs.operation}</td>
<td align="center">${logs.createTime}</td>
<td align="center">
<c:if test="${logs.abnormalFlag==0 }">
<a href="javascript:updateDataStatus('${logs.id}',1,'${logs.isadmin }')" class="btn-success btn-sm">正常</a>
</c:if>
<c:if test="${logs.abnormalFlag==1 }">
<a href="javascript:updateDataStatus('${logs.id}',0,'${logs.isadmin }')" class="btn btn-danger btn-sm">異常</a>
</c:if>
</td>
</tr>
</c:forEach>
</tbody>
</thead>
</table>
<!-- -->
<font size="5px">共計爲您搜索到：${pb.total }條數據；每頁顯示：${pb.pageSize }條;共${pb.pages }頁;當前是第</font>
<font style="color: red" size="5px">${pb.pageNum}</font><font size="5px">頁</font>;
<!-- 分頁開始======================= -->
<div style="height: 400px;">
<ul class="pagination">
<!-- 上一頁 -->
<!-- 噹噹前頁碼爲1時，隱藏上一頁按鈕 -->
<li <c:if test="${pb.pageNum==1 }">class="disabled"</c:if>>
<!-- 噹噹前頁碼不等於1時，跳轉到上一頁 -->
<a
<c:if test="${pb.pageNum==1 }">href="javaScript:void(0)"</c:if>
<c:if test="${pb.pageNum!=1 }">href="javaScript:pageTo('${pb.pageNum-1 }')"</c:if>
>上一頁</a>
</li>
<!-- 頁碼 -->
<!-- 當總頁數小於等於7時，顯示頁碼1...7頁 -->
<c:if test="${pb.pages<=7}">
<c:forEach begin="1" end="${pb.pages}" var="i">
<li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
<a
href="javaScript:pageTo('${i}')">${i}</a>
</li>
</c:forEach>
</c:if>
<!-- 當總頁數大於7時 -->
<c:if test="${pb.pages>7}">
<!-- 當前頁數小於等於4時，顯示1到5...最後一頁 -->
<c:if test="${pb.pageNum<=4}">
<c:forEach begin="1" end="5" var="i">
<li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
<a
href="javaScript:pageTo('${i}')">${i}</a>
</li>
</c:forEach>
<li><a href="#">...</a></li>
<li
<c:if test="${pb.pageNum==pb.pages }">class="active"</c:if>>
<a
href="javaScript:pageTo('${pb.pages}')">${pb.pages}</a>
</li>
</c:if>
<!-- 當前頁數大於4時，若是當前頁小於總頁碼書-3，則顯示1...n-1,n,n+1...最後一頁 -->
<c:if test="${pb.pageNum>4}">
<c:if test="${pb.pageNum<pb.pages-3}">
<li><a
href="javaScript:pageTo('${1}')">${1}</a>
</li>
<li><a href="#">...</a></li>
<c:forEach begin="${pb.pageNum-1 }" end="${pb.pageNum+1 }"
var="i">
<li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
<a
href="javaScript:pageTo('${i}')">${i}</a>
</li>
</c:forEach>
<li><a href="#">...</a></li>
<li
<c:if test="${pb.pageNum==pb.pages }">class="active"</c:if>>
<a
href="javaScript:pageTo('${pb.pages}')">${pb.pages}</a>
</li>
</c:if>
</c:if>
<!-- 當前頁數大於4時，若是當前頁大於總頁碼書-4，則顯示1...最後一頁-3，最後一頁-2，最後一頁-1，最後一頁 -->
<c:if test="${pb.pageNum>pb.pages-4}">
<li><a
href="javaScript:pageTo('${1}')">${1}</a>
</li>
<li><a href="#">...</a></li>
<c:forEach begin="${pb.pages-3 }"
end="${pb.pages }" var="i">
<li <c:if test="${pb.pageNum==i }">class="active"</c:if>>
<a
href="javaScript:pageTo('${i}')">${i}</a>
</li>
</c:forEach>
</c:if>
</c:if>
<!-- 下一頁 -->
<!-- 噹噹前頁碼爲最後一頁或者最後一頁爲0時，隱藏下一頁按鈕
噹噹前頁碼不等於總頁碼時，跳轉下一頁 -->
<li
<c:if test="${pb.pageNum==pb.pages || pb.pages==0}">class="disabled"</c:if>>
<a
<c:if test="${pb.pageNum==pb.pages || pb.pages==0 }">href="javaScript:void(0)"</c:if>
<c:if test="${pb.pageNum!=pb.pages }">href="javaScript:pageTo('${pb.pageNum+1 }')"</c:if>>下一頁</a>
</li>
</ul>
<!-- 跳轉頁 -->
<%-- <div class="jump">
<span class="jump_text">共有${pb.pages }頁,${totalElements }條記錄,跳到
<input type="text" name="jumpPage"
id="jumpPage"
onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');">頁
<button type="button" class="btn btn-primary btn-xs"
onclick="goPage()">GO</button>
</span>
</div> --%>
<div style="clear: both;"></div>
</div>
<!-- 分頁結束======================= -->
</body>
</html>java |
3. 傳統方式分頁教程
https://my.oschina.net/springMVCAndspring/blog/1831977mysql
4. 附件
源碼：jquery
碼雲：git
https://gitee.com/Luck_Me/paging_demo/tree/mastergithub
百度雲：spring
連接：https://pan.baidu.com/s/1pjW9pQmPxib8aubUfAQRxA 提取碼：mmyp