springboot+thymeleaf怎麼給HTML做分頁？

這裏後端mybatis用的是pagehelper做的分頁插件，會爲前端提供pageNum當前頁，pages總頁數，以及list結果集，這裏只講解前端的分頁，關於pagehelper分頁的方式：pagehelper的使用
目前我們只需要兩個值來對前端進行分頁，第一個是pageNum，表示的是我們當前頁，第二個是pages，表示總頁數。
pageNum我們可以對當前的頁碼顯示高亮，並且計算其前面以及後面需要顯示多少個頁碼，pages總頁數可以判斷是否到最後一個頁碼，如果到最後了就不允許該頁碼進行點擊後去請求數據，接下來看看效果：

這裏鼠標在上一頁的時候會顯示一個禁止的標籤(截不出來，腦補下吧)，同時點擊上一頁不會有任何效果，點擊下一頁就會跳轉到第二頁，通知pages爲2的時候，點擊下一頁也會有禁止的標籤同時不能進行跳轉。
接下來先上代碼：
由於方便演示，就寫了兩個頁碼…

<ul class="pagination" style="margin-top: 5px">
                    <li th:class="${pageNum==1}?'disabled' : ''"><a th:href="@{'~/getBlogByPage/' + ${pageNum-1} }"
                                                                    id="lastPage">上一頁</a></li>
                    <li th:if="${pageNum-3 >=1}"><a th:text="${pageNum -3}"
                                                    th:href="@{'~/getBlogByPage/' + ${pageNum-3}}">1</a></li>
                    <li th:if="${pageNum-2 >=1}"><a th:text="${pageNum -2}"
                                                    th:href="@{'~/getBlogByPage/' + ${pageNum-2}}">1</a></li>
                    <li th:if="${pageNum-1 >=1}"><a th:text="${pageNum -1}"
                                                    th:href="@{'~/getBlogByPage/' + ${pageNum-1}}">1</a></li>
                    <li class="active"><a href="#" th:text="${pageNum}" id="nowPage">1</a></li>
                    <!--借用此標籤來獲取總頁數 在js中獲取-->
                    <p hidden th:text="${pages}" id="pages"></p>
                    <!-- 同css js  img那些一樣 頁面經過後臺後  路徑會變 所以寫 絕對路徑！！-->
                    <li th:if="${pageNum+1 <=pages}"><a th:href="@{'~/getBlogByPage/' + ${pageNum+1}}"
                                                        th:text="${pageNum +1}">1</a></li>
                    <li th:if="${pageNum+2 <=pages}"><a th:href="@{'~/getBlogByPage/' + ${pageNum+2}}"
                                                        th:text="${pageNum +2}">1</a></li>
                    <li th:if="${pageNum+3 <=pages}"><a th:href="@{'~/getBlogByPage/' + ${pageNum+3}}"
                                                        th:text="${pageNum +3}">1</a></li>

                    <li th:class="${pageNum==pages}?'disabled' : ''"><a th:href="@{'~/getBlogByPage/' + ${pageNum+1}}"
                                                                        id="finallyPage">下一頁</a></li>
                </ul>

以上是html，接下來通過js（jquery）來對當前頁碼如果是第一頁的時候，點擊上一頁時，鏈接無效，噹噹前頁碼爲最後一頁的時候，頁碼無效。

<script>
    $('#lastPage').click(function () {
        var pageNum = $('#nowPage').text();  //獲取當前頁面
        if (pageNum <= 1) { //噹噹前頁小於等於1的時候 就讓鏈接失效
            $('#lastPage').attr('href', "#");
        }
    })

    $('#finallyPage').click(function () {
        var pageNum = $('#nowPage').text();  //獲取當前頁面
        var pages = $('#pages').text();//通過擁有hidden屬性的標籤p來獲取總農業面數
        if (pageNum>=pages) { //噹噹前頁數大於等於總頁數的時候 就讓鏈接失效
            $('#finallyPage').attr('href', "#");
        }
    })
</script>

接下來詳細講解下代碼：

p1:進行判斷當前頁減1/2/3的時候是否大於0，來判斷是否進行顯示，即當前頁前最多顯示3頁。
p2：藉助此hidden標籤，通過js來得到總共的頁數值。
p3：通過表達式來判斷不同的頁碼需要向後臺傳遞的參數，即請求的頁碼數，來獲得指定頁面的信息。
p4：實現點擊上一頁，頁碼會發生跳轉。
p5：通過此屬性，在jq內可以得到該標籤，然後通過jq來修改href爲失效的狀態： $(’#lastPage’).attr(‘href’, “#”);

p1:如果是第一頁，那麼就設置href爲#，即無效
p1:如果是最後一頁，那麼就設置href爲#，即無效，這裏需要藉助：<p hidden th:text="${pages}" id="pages"></p>來獲取總頁碼數。
以上就是如何用thymeleaf來給前端分頁，至於如何獲取分頁的數據，pageNum，pagehelper，以及每頁的信息，可以參考pagehelper的使用，如果能夠幫助到大家，希望點個關注點個贊，如果有疑問或者改進，歡迎在下方留言，謝謝！