How does springboot+thymeleaf paginate HTML?

The backend mybatis here uses the paging plug-in made by pagehelper, which will provide the front end with pageNum current page, the total number of pages, and the list result set. Here we only explain the front-end paging, about the pagehelper paging method: The use of pagehelper is
currently only Two values ​​are needed to page the front end. The first is pageNum , which represents our current page, and the second is pages , which represents the total number of pages.
pageNum we can highlight the current page number, and calculate how many page numbers need to be displayed before and after it. The total number of pages can judge whether it is the last page number. If it is the last page number, click on the page number to request data. ,

Let’s take a look at the effect: here, when the mouse is on the previous page, a forbidden label will be displayed (can't be cut out, please fill it in), and clicking the previous page will not have any effect, clicking the next page will jump Go to the second page, when the notification pages is 2, click on the next page, there will also be forbidden tabs and you cannot jump.
Next, let’s add the code first:
For the convenience of demonstration, I wrote two page numbers...

<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>

The above is html. Next, if the current page number is the first page through js (jquery), the link is invalid when the previous page is clicked, and when the current page number is the last page, the page number is invalid.

<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>

Next, explain the code in detail:

p1: judge whether the current page minus 1/2/3 is greater than 0, to judge whether to display, that is, at most 3 pages are displayed before the current page.
p2: Use this hidden tag to get the total page value through js.
p3: Use expressions to determine the parameters that need to be passed to the background for different page numbers, that is, the requested number of page numbers, to obtain information about the specified page.
p4: Click the previous page, the page number will jump.
p5: Through this attribute, you can get the tag in jq, and then modify href to invalid state through jq: $('#lastPage').attr('href', “#”);

p1: If it is the first page, then set href to #, which is invalid.
p1: If it is the last page, then set href to #, which is invalid. Here you need to use: <p hidden th:text="${pages}" id="pages"></p>to get the total page number.
The above is how to use thymeleaf to paging the front end. As for how to get the paging data, pageNum, pagehelper, and the information of each page, you can refer to the use of pagehelper . If it can help everyone, I hope you can give me a thumbs up. If you have any questions Or improve, welcome to leave a message below, thank you!