springboot + thymeleafはどのようにHTMLをページングしますか？

ここでのバックエンドmybatisは、pagehelperによって作成されたページングプラグインを使用します。これにより、フロントエンドにpageNumの現在のページ、ページの総数、およびリストの結果セットが提供されます。ここでは、フロントエンドのページングについて、ページヘルパーのページング方法についてのみ説明します。pagehelperの使用は
現在のみです。フロントエンドをページングするには、2つの値が必要です.1つ目は現在のページを表すpageNumで、2つ目はページの総数を表すpagesです。
pageNum現在のページ番号を強調表示し、その前後に表示する必要のあるページ番号を計算できます。合計ページ数で、最後のページ番号かどうかを判断できます。最後のページ番号の場合は、ページ番号をクリックしてデータをリクエストします。、効果を見てみ
ここに画像の説明を挿入
ましょう。ここでは、前のページにマウスを置くと、禁止ラベルが表示され（切り抜くことができないので、記入してください）、前のページをクリックしても効果はありません。次のページをクリックするとジャンプします。 2ページ目に移動します。通知ページが2の場合、次のページをクリックすると、禁止されているタブも表示され、ジャンプすることはできません。
次に、最初にコードを追加しましょう。
デモンストレーションの便宜上、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：この隠しタグを使用して、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をページングしますか？

おすすめ