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的使用，如果能够帮助到大家，希望点个关注点个赞，如果有疑问或者改进，欢迎在下方留言，谢谢！

springboot+thymeleaf怎么给HTML做分页？

猜你喜欢