PageHelper分頁外掛及通用分頁js
阿新 • • 發佈：2018-12-12
1.物理分頁
物理分頁依賴的是某一物理實體，這個物理實體就是資料庫，比如MySQL資料庫提供了limit關鍵字，程式設計師只需要編寫帶有limit關鍵字的SQL語句，資料庫返回的就是分頁結果。建議使用。
2.邏輯分頁
邏輯分頁依賴的是程式設計師編寫的程式碼。資料庫返回的不是分頁結果，而是全部資料，然後再由程式設計師通過程式碼獲取分頁資料，常用的操作是一次性從資料庫中查詢出全部資料並存儲到List集合中，因為List集合有序，再根據索引獲取指定範圍的資料。
MyBatis 分頁外掛 - PageHelper
該外掛目前支援以下資料庫的物理分頁:
OracleMysqlMariaDBSQLiteHsqldbPostgreSQLDB2SqlServer(2005,2008)InformixH2SqlServer2012DerbyPhoenix
分頁外掛 5.0
由於分頁外掛 5.0 版本和 4.2.x 實現完全不同，所以 master 分支為 5.x 版本，4.2 作為一個分支存在，如果有針對 4.2 的 PR，請注意提交到分支版本。
整合
如果你使用 Maven，你只需要在 pom.xml 中新增下面的依賴：
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>最新版本</version>
</dependency>
本次開發環境：JDK1.8+MySql5.0+Mybatis-pagehelper4.2.1+maven
注意maven中的其他依賴的版本可能會影響該外掛，導致引入失敗
使用步驟
1.在maven pom.xml中新增依賴
2.在Mybatis-config.xml中sqlSessionFactory中新增外掛配置
<!--分頁外掛--><property name="plugins"> <array> <bean class="com.github.pagehelper.PageHelper"> <property name="properties"><value> dialect=mysql </value> </property> </bean> </array></property>
3.寫sql、service
public PageInfo<Student> selectByUnitId(Integer id,Integer currPage,Integer pageSize) {
PageHelper.startPage(currPage,pageSize);//當前頁面編號+（從第0頁開始），每頁的大小
PageInfo<Student> pageInfo = new PageInfo<Student>(studentDao.selectByUnitId(id));
return pageInfo;
}建議sql不要這樣簡單粗暴的查詢sql：select * from student；即使如此pageHelper外掛也會自動的查詢指定的條數PageInfo:大致包含以下資訊：｛pageNum=1, pageSize=5, size=5, startRow=1, endRow=5, total=10, pages=2, list{...}｝每次查詢之後將指定條數的資料放在PageInfo中。在Controller層 把pageInfo放在requestScope中，命名student（與下文同）
這樣就可以根據pageNum輸出指定的資訊
jsp：分頁標籤
這是一個完整的分頁標籤，只要更改引數即可 <div class="text-center">
<nav>
<ul class="pagination">
<li>
<a href="<c:url value="/student?unitId=${param.unitId}&currPage=1&unitName=${param.unitName}"/>">首頁</a>
</li>
<li>
<a href="<c:url value="/student?unitId=${param.unitId}&currPage=${student.pageNum-1>1?student.pageNum-1:1}&unitName=${param.unitName} "/>">«</a>
</li>
<c:forEach begin="1" end="${student.pages}" varStatus="loop">
<c:set var="active" value="${loop.index==student.pageNum?'active':''}"/>
<li class="${active}"><a
href="<c:url value="/student?unitId=${param.unitId}&currPage=${loop.index}&unitName=${param.unitName}"/>">${loop.index}</a>
</li>
</c:forEach>
<li>
<a href="<c:url value="/student?unitId=${param.unitId}&currPage=${student.pageNum+1<student.pages?student.pageNum+1:student.pages}&unitName=${param.unitName}"/>">»</a>
</li>
<li>
<a href="<c:url value="/student?unitId=${param.unitId}&currPage=${student.pages}&unitName=${param.unitName}"/>">尾頁</a>
</li>
</ul>
</nav>
</div>
js：分頁程式碼
function createPaginationNav(e, t, a, n, p, o, i, s) {
null == e && (e = ""), e = e.replace(/\&currPage=\d+\&/, "&"), e = e.replace(/\&?currPage=\d+\&?/, "");
var r = e.length;
r > 0 && "?" == e.charAt(r - 1) && (e = e.replace("?", "")), null == i && (i = ""), "undefined" == typeof s && (s = 10);
var g = s,
l = e,
f = l.indexOf("?");
if (l += f > 0 ? "&currPage=" : "?currPage =", document.write('<span style="font-size:12px;">第' + t + "頁 </span>"), document.write('<span style="font-size:12px;">共' + p + "頁 </span>"), p > 1) {
1 == t ? (document.write('<a href="#">首頁</a>'), document.write('<a href="#" title="上一頁"><span style="font-size:12px;"><<</span></a>')) : (document.write('<a href="' + l + '1">首頁</a>'), document.write('<a href="' + l + a + '" title="上一頁"><span style="font-size:12px;"><<</span></a>'));
var d = 1;
if (p > g) {
var u = 0,
c = 0,
m = Math.round(g / 2);
for (d = p / g + 1, t > m && p - m >= t ? (u = t - m, c = t + m - 1) : m >= t ? (u = 1, c = g) : (u = p - g + 1, c = p), c > p && (c = p), ipage = u; c >= ipage; ipage++) p >= ipage && document.write(t == ipage ? '<a href="' + l + ipage + '" ><span style="font-size:18px;color:red;">' + ipage + "</span></a>" : '<a href="' + l + ipage + '" ><span style="font-size:12px;">' + ipage + "</span></a>")
} else
for (ipage = 1; p >= ipage; ipage++) document.write(t == ipage ? '<a href="' + l + ipage + '" ><span style="font-size:18px;color:red;">' + ipage + "</span></a>" : '<a href="' + l + ipage + '" ><span style="font-size:12px;">' + ipage + "</span></a>");
t == p ? (document.write('<a href="#" title="下一頁"><span style="font-size:12px;">>></span></a>'), document.write('<a href="#">尾頁</a>')) : (document.write('<a href="' + l + n + '" title="下一頁"><span style="font-size:12px;">>></span></a>'), document.write('<a href="' + l + p + '">尾頁</a>')), document.write('<input type="text" id="gotopage' + i + '" size="2" onkeypress="if (event.keyCode == 13)goto_page(\'' + l + "','" + i + '\')"> <a href="#" onclick="goto_page(\'' + l + "','" + i + '\')"><span style="font-size:12px;">GOTO</span></a>')
}
}
function goto_page(e, t) {
var a = /^[0-9]+$/;
return gotoInputId = "gotopage" + t, a.test(document.getElementById(gotoInputId).value) ? void(location.href = e + document.getElementById(gotoInputId).value) : (alert("請輸入數字！"), document.getElementById(gotoInputId).value = "", !1)
}//在jsp中呼叫此函式
<div class="page right"> <script language="javascript"> createPaginationNav('${pageContext.request.contextPath}/student?unitId=${param.unitId}&currPage=0', ${student.pageNum}, ${student.prePage}, ${student.nextPage}, ${student.pages}, ${student.pageSize}, ''); </script></div>