SpringBoot学习（五）——————Thymeleaf +bootstrap 分页

---

前言

本篇主要记录，我在学习springboot的过程中，通过Thymeleaf和Bootstrap样式进行分页的相关操作，留做记录。 这里只展示部分重点代码片段，完整代码，在gite上，有兴趣的可以去看看。两个项目使用的分页功能稍有不同，但是大体的原理上是相同的，只有页面绑定跳转事件的方式稍稍有所不同。

完整代码（记账项目）
完整代码（旅游后台项目）

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、旅游后台项目分页

1.1 html页面的分页代码

				<div>
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li id="first">
                                <a href="javascript:void(0);">
                                    <span aria-hidden="true">首页</span>
                                </a>
                            </li>
                            <li id="prev">
                                <a href="javascript:void(0);" aria-label="Previous">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>
                            <li name="pageNum" th:each="i : ${page.navigatepageNums}" th:class="${i == page.pageNum} ? 'active'">
                                <a href="javascript:void(0);" th:text="${i}"></a>
                            </li>
                            <li id="next">
                                <a href="javascript:void(0);" aria-label="Next">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>

                            <li id="last">
                                <a href="javascript:void(0);">
                                    <span aria-hidden="true">末页</span>
                                </a>
                            </li>

                            <span style="font-size: 20px;margin-left: 5px;"
                                  th:text="|共 ${page.total} 条记录，${page.pages}共页， 每页行数: ${page.pageSize} 行|"></span>
                            <select id="setRows">
                                <option value="5" th:selected="${5 == page.pageSize}">5</option>
                                <option value="10" th:selected="${10 == page.pageSize}" >10</option>
                                <option value="20" th:selected="${20 == page.pageSize}" >20</option>
                                <option value="30" th:selected="${30 == page.pageSize}" >30</option>
                            </select>

                        </ul>
                    </nav>
                </div>

1.2 效果

分页的效果和我下面展示的类似，

1.3 添加点击事件

在写完HTML代码之后，点分页的相关按钮是没有反应的，需要添加对应的响应事件。
逻辑页好理解，就是点击相关的按钮，能呈现出对应的现象，展示数据。

<script>
    // 分页
    var pageNum = [[${page.pageNum}]];
    var pages = [[${page.pages}]];
    var hasNextPage = [[${page.hasNextPage}]];
    var hasPreviousPage = [[${page.hasPreviousPage}]];

    // 判断按钮状态
    // 没有上一页
    if(!hasPreviousPage) {
        $("#prev").addClass("disabled");
        $("#first").addClass("disabled");
    }
    // 没有下一页
    if(!hasNextPage) {
        $("#next").addClass("disabled");
        $("#last").addClass("disabled");
    }

    // 添加事件
    // 点击首页
    $("#first").click(function () {
        if(!$("#first").hasClass("disabled")) {
            $("#pageNum").val(1);
            $("#qf").submit();
        }
    });
    // 点击上一页
    $("#prev").click(function () {
        if(!$("#prev").hasClass("disabled")) {
            $("#pageNum").val(pageNum - 1);
            $("#qf").submit();
        }
    });
    // 下一页
    $("#next").click(function () {
        if(!$("#next").hasClass("disabled")) {
            $("#pageNum").val(pageNum + 1);
            $("#qf").submit();
        }
    });
    // 最后一页
    $("#last").click(function () {
        if(!$("#last").hasClass("disabled")) {
            $("#pageNum").val(pages);
            $("#qf").submit();
        }
    });

    //页码分页
    $("li[name='pageNum']").click(function(){
        if (!$(this).hasClass("active")) {
            $("#pageNum").val($(this).children("a").html());
            $("#qf").submit();
        }
    });

    // 设置每页行数
    $("#setRows").change(function () {
        console.log($(this).val())
        $("#pageSize").val($(this).val());
        $("#pageNum").val(1);
        $("#qf").submit();
    });

二、记账项目的分页

1.1 分页代码

这里的分页代码比较简单：

<ul class="pagination">
    <li><button class="btn btn-default" id="first">第一页</button></li>
    <li><button class="btn btn-default" id="prev">上一页</button></li>
    <li th:each="p: ${page.navigatepageNums}">
        <button class="btn btn-default" name="pn" th:text="${p}" th:disabled="${p == page.pageNum}"></button>
    </li>
    <li><button class="btn btn-default" id="next">下一页</button></li>
    <li><button class="btn btn-default" id="last">最后页</button></li>
</ul>

但是效果差不多

1.2 分页代码

<script>
    $(function() {
        //通过内联js得到分页先关数据
        var pageNum = [[${page.pageNum}]]; //当前页
        var pageCount = [[${page.pages}]]; //总页数
        var hasNextPage = [[${page.hasNextPage}]]; //true，有下一页
        var hasPreviousPage = [[${page.hasPreviousPage}]]; //true，有下一页

        //按钮事件
        $("#next").click(function() {
            $("#pageNum").val(pageNum + 1);
            $("#qf").submit();
        });
        $("#prev").click(function() {
            $("#pageNum").val(pageNum - 1);
            $("#qf").submit();
        });
        $("#first").click(function() {
            $("#pageNum").val(1);
            $("#qf").submit();
        });
        $("#last").click(function() {
            $("#pageNum").val(pageCount);
            $("#qf").submit();
        });

        //点击页面跳转
        $("button[name='pn']").click(function() {
            $("#pageNum").val($(this).html());
            $("#qf").submit();
        });

        //控制按钮状态
        if (!hasNextPage) {
            $("#last").prop("disabled", true);
            $("#next").prop("disabled", true);
        }
        if (!hasPreviousPage) {
            $("#first").prop("disabled", true);
            $("#prev").prop("disabled", true);
        }

    })
</script>

三、总结

两中分类没什么本质区别，就是代码的多少而已。