SpringData+Thymeleaf3+Bootstrap4實(shí)現(xiàn)分頁(yè)器實(shí)例代碼

實(shí)際上分頁(yè)器或者分頁(yè)組件在現(xiàn)實(shí)中都有廣泛著的應(yīng)用，照理來(lái)說(shuō)老衛(wèi)沒(méi)有必要單獨(dú)撰文來(lái)提這茬。事實(shí)是，我近期剛好在寫(xiě)一門(mén)關(guān)于Spring Data、Thymeleaf 3、Bootstrap 4 的應(yīng)用課程，所以用了Bootstrap 4的樣式，結(jié)果之前很多例如 Bootstrap 3 的表格、分頁(yè)器啊之類的插件都不能很好的兼容，百度谷歌無(wú)果，而且 Bootstrap 4 還沒(méi)有出穩(wěn)定版本，官網(wǎng)的示例也是少的可憐，最終下決心要自己寫(xiě)個(gè)分頁(yè)器了，所用到的技術(shù)就是 Spring Data、Thymeleaf 3、Bootstrap 4 。

創(chuàng)新互聯(lián)建站專注于涿州網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠(chéng)為您提供涿州營(yíng)銷型網(wǎng)站建設(shè)，涿州網(wǎng)站制作、涿州網(wǎng)頁(yè)設(shè)計(jì)、涿州網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開(kāi)發(fā)服務(wù)，打造涿州網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供涿州網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

分頁(yè)器有哪些需求

中國(guó)式報(bào)表從來(lái)都是最復(fù)雜的，隨之衍生而來(lái)的分頁(yè)器要求也是錯(cuò)綜復(fù)雜。本例為求把分頁(yè)器原理告訴給大家，所以，將分頁(yè)組件的抽象為以下通用的內(nèi)容：

顯示頁(yè)碼的列表；
該列表的第一項(xiàng)是“上一頁(yè)”，最后一項(xiàng)是“下一頁(yè)”；
當(dāng)前選中的頁(yè)碼要高亮；
當(dāng)當(dāng)前頁(yè)的上一頁(yè)沒(méi)有頁(yè)碼可選時(shí)，則“上一頁(yè)”置為不可點(diǎn)擊的狀態(tài)；
當(dāng)當(dāng)前頁(yè)的下一頁(yè)沒(méi)有頁(yè)碼可選時(shí)，則“下一頁(yè)”置為不可點(diǎn)擊的狀態(tài)；

我們很容易就能找到一個(gè) Bootstrap 分頁(yè)器的設(shè)計(jì)原型，如下圖：

Spring Data + Thymeleaf 3 + Bootstrap 4 實(shí)現(xiàn)分頁(yè)器實(shí)例代碼

你可以參考 Bootstrap 官網(wǎng)的介紹 http://getbootstrap.com/components/#pagination，但建議你不要直接用上面的樣式，因?yàn)檫@個(gè)樣式是 Bootstrap 3版本的。最后，我找到的了Bootstrap 4 里面的樣式，卻不在官網(wǎng) http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_pagination.cfm。感謝 books-collection 項(xiàng)目帶給程序員的開(kāi)源、免費(fèi)圖書(shū)集合！

Spring Data 能做什么

org.springframework.data.domain.Page 是 Spring Data 提供的一個(gè)分頁(yè)器接口，提供了常用的方法，比如：

List getContent(); // 返回分頁(yè)后的數(shù)據(jù)的列表
int getTotalPages(); // 總頁(yè)數(shù)
long getTotalElements(); // 總數(shù)據(jù)量
boolean isFirst(); // 是否是第一個(gè)數(shù)據(jù)；
boolean isLast(); // 是否是最后一個(gè)數(shù)據(jù)；
int getNumber(); // 當(dāng)前頁(yè)面索引

構(gòu)造一個(gè) Page，通常需要傳入一個(gè) org.springframework.data.domain.PageRequest.PageRequest對(duì)象，所需參數(shù)為 (int page, int size)，其中 page 就是要請(qǐng)求的頁(yè)面的索引，size 是頁(yè)面的大小（一頁(yè)最多有多少個(gè)數(shù)據(jù)）。

Spring Data 可以說(shuō)提供了我們前端分頁(yè)器所需要的所有元素了。

Thymeleaf 牛刀小試

Thymeleaf 作為模版引擎，其好處就是可以綁定數(shù)據(jù)源，并且根據(jù)數(shù)據(jù)源來(lái)渲染頁(yè)面。最爽的莫過(guò)于根據(jù)綁定的數(shù)據(jù)列表來(lái)遍歷生成頁(yè)面元素，比如：

<ul class="pagination" >
 <!-- 上一頁(yè) -->
 <li class="page-item" data-th-classappend="*{first} ? 'disabled' : ''">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
  <span aria-hidden="true">«</span>
 </a>
 </li>
 
 <!-- 迭代生成頁(yè)碼 -->
 <li class="page-item" data-th-each="i : ${#numbers.sequence(1, page.totalPages)}" 
 data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
 <a class="page-link" data-th-attr="pageIndex=${i} - 1" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
       <span data-th-text="${i}"></span>
    </a>
 </li>
 
 <!-- 下一頁(yè) -->
 <li class="page-item" data-th-classappend="*{last} ? 'disabled' : ''">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} + 1" aria-label="Next">
  <span aria-hidden="true">»</span>
 </a>
 </li>
</ul>

這個(gè)就是簡(jiǎn)單版本的分頁(yè)器了，可以看到我們的分頁(yè)器的“上一頁(yè)”和“下一頁(yè)”是固定不變的，中間根據(jù) totalPages（總頁(yè)數(shù)）來(lái)動(dòng)態(tài)生成頁(yè)面。同時(shí)，我們根據(jù)是否是當(dāng)前頁(yè)（number + 1）來(lái)設(shè)置樣式是否高亮（active）。“上一頁(yè)”和“下一頁(yè)”是需要做一下判斷的，若當(dāng)前頁(yè)是第一頁(yè)（first）則“上一頁(yè)”不能點(diǎn)擊（disabled）；如果當(dāng)前頁(yè)是最后一頁(yè)（last）則“下一頁(yè)”不能點(diǎn)擊（disabled）。

考慮的再多一點(diǎn)

實(shí)際上，上面版本可以應(yīng)付大多數(shù)的應(yīng)用場(chǎng)景了。但是，可能會(huì)有點(diǎn)不完美，比如，我的頁(yè)數(shù)很多怎么辦？那么我們的分頁(yè)列表可能被拉得很長(zhǎng)了，領(lǐng)導(dǎo)們可能會(huì)不滿意的！絕對(duì)要把這種不滿意的情緒扼殺在搖籃里。

可以看到，假如要做得更加完美，則還需要考慮，當(dāng)頁(yè)數(shù)太多時(shí)，應(yīng)該將某些用省略號(hào)。這就涉及到三種情況了：

當(dāng)當(dāng)前頁(yè)頁(yè)碼接近首頁(yè)時(shí)，省略號(hào)在后部出現(xiàn)；
當(dāng)當(dāng)前頁(yè)頁(yè)碼接最后頁(yè)時(shí)，省略號(hào)在前部出現(xiàn)；
最煩的要屬于，當(dāng)當(dāng)前頁(yè)在中部時(shí)，前部、后部都需要省略號(hào)；

帶省略號(hào)的分頁(yè)器

聰明的工程師們應(yīng)該馬上行動(dòng)起來(lái)，大致的把算法畫(huà)了個(gè)草圖：

Spring Data + Thymeleaf 3 + Bootstrap 4 實(shí)現(xiàn)分頁(yè)器實(shí)例代碼

為求簡(jiǎn)單，我們預(yù)設(shè)頁(yè)碼的列表最多在 7 頁(yè)（你也可以根據(jù)需要來(lái)改），也就是說(shuō)，當(dāng) totalPages（總頁(yè)數(shù)）超過(guò) 7時(shí)，我們才需要考慮省略號(hào)的事情。

“上一頁(yè)”和“下一頁(yè)”的算法于我們上面的簡(jiǎn)單版本類似，這里就不贅述了。
當(dāng)前頁(yè)面頁(yè)碼小于等于4時(shí)，省略號(hào)在列表后部的倒數(shù)第二個(gè)出現(xiàn)；
最后一頁(yè)與當(dāng)前頁(yè)面之差小于等于3時(shí)，省略號(hào)在列表前部的第二個(gè)位置出現(xiàn)；
其余情況，則當(dāng)前頁(yè)適中處于中間位置，省略號(hào)同時(shí)在列表第二個(gè)位置及倒數(shù)第二個(gè)位置出現(xiàn)。

實(shí)現(xiàn)方式如下：

<!-- 處理頁(yè)數(shù)大于7 的情況 --> 
<ul class="pagination" data-th-if="${page.totalPages gt 7}" >
 <!-- 上一頁(yè) -->
 <li class="page-item" data-th-classappend="*{first} ? 'disabled' : ''">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} - 1" aria-label="Previous">
  <span aria-hidden="true">«</span>
 </a>
 </li>
 
 <!-- 首頁(yè) -->
 <li class="page-item" data-th-classappend="${(page.number + 1) eq 1} ? 'active' : ''" >
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=0">1</a>
 </li>
 
 
 <!-- 當(dāng)前頁(yè)面小于等于4 -->
 <li class="page-item" data-th-if="${(page.number + 1) le 4}" data-th-each="i : ${#numbers.sequence(2,5)}" 
 data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
 <a class="page-link" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-th-attr="pageIndex=${i} - 1">
      <span data-th-text="${i}"></span>
    </a>
 </li>

 <li class="page-item disabled" data-th-if="${(page.number + 1) le 4}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link">
  <span aria-hidden="true">...</span>
 </a>
 </li>
 
 <!-- 最后一頁(yè)與當(dāng)前頁(yè)面之差，小于等于3 -->
 <li class="page-item disabled" data-th-if="${(page.totalPages-(page.number + 1)) le 3}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link">
  <span aria-hidden="true">...</span>
 </a>
 </li> 
 <li class="page-item" data-th-if="${(page.totalPages-(page.number + 1)) le 3}" data-th-each="i : ${#numbers.sequence(page.totalPages-4, page.totalPages-1)}" 
 data-th-classappend="${(page.number + 1) eq i} ? 'active' : ''" >
 <a class="page-link" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-th-attr="pageIndex=${i} - 1">
      <span data-th-text="${i}"></span>
    </a>
 </li>
 
 <!-- 最后一頁(yè)與當(dāng)前頁(yè)面之差大于3，且 當(dāng)前頁(yè)面大于4-->
 
 <li class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link">
  <span aria-hidden="true">...</span>
 </a>
 </li> 
 <li class="page-item" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}" >
  <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number}">[[${page.number}]]</a>
 </li>
 <li class="page-item active" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} + 1">[[${page.number + 1}]]</a>
 </li>
 <li class="page-item" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} + 2">[[${page.number + 2}]]</a>
 </li>
 
 <li class="page-item disabled" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link">
  <span aria-hidden="true">...</span>
 </a>
 </li>

 <!-- 最后一頁(yè) -->
 <li class="page-item" data-th-classappend="${(page.number + 1) eq page.totalPages} ? 'active' : ''" >
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.totalPages} - 1">[[${page.totalPages}]]</a>
 </li>

 <!-- 下一頁(yè) -->
 <li class="page-item" data-th-classappend="*{last} ? 'disabled' : ''">
 <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link" data-th-attr="pageIndex=${page.number} + 1" aria-label="Next">
  <span aria-hidden="true">»</span>
 </a>
 </li>
</ul>

還要再考慮的多一點(diǎn)？

當(dāng)然，正如我們開(kāi)篇所講，中國(guó)式報(bào)表的需求千奇百怪，本文也只是從大部分通用需求出發(fā)，給個(gè)思路，不一定能滿足所有人的需求。如果可能的話，再考慮多一點(diǎn)，比如：

是否可以選擇頁(yè)面的最大頁(yè)？
是否可以選擇任意頁(yè)面的索引？

等等，尼瑪看來(lái)下表快凌晨1點(diǎn)了。頂不順了，要睡了。各位讀者朋友可以繼續(xù)完善~

最終效果

Spring Data + Thymeleaf 3 + Bootstrap 4 實(shí)現(xiàn)分頁(yè)器實(shí)例代碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：SpringData+Thymeleaf3+Bootstrap4實(shí)現(xiàn)分頁(yè)器實(shí)例代碼
URL地址：http://www.rwnh.cn/article26/pgcpcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、面包屑導(dǎo)航、網(wǎng)站建設(shè)、微信小程序、外貿(mào)網(wǎng)站建設(shè)、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

SpringData+Thymeleaf3+Bootstrap4實(shí)現(xiàn)分頁(yè)器實(shí)例代碼