1. 程式人生 > >spriungboot2.0.6 bootstrap4.0.0 thymeleaf分頁

spriungboot2.0.6 bootstrap4.0.0 thymeleaf分頁

最終效果圖 ,差不多就這樣

匯入pom依賴的分頁外掛(bootstrap 和 thymeleaf 我就不寫了)

<!-- 分頁外掛 -->
<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.2.5</version>
</dependency>

PageInfo屬性解釋

public class PageInfo<T> extends PageSerializable<T> {
    private int pageNum;//當前頁碼
    private int pageSize;//每頁數量
    private int size;//當前頁的數量
    private int startRow;//當前頁面第一個元素在資料庫中的行號
    private int endRow;//當前頁面最後一個元素在資料庫中的行號
    private int pages;//總頁數
    private int prePage;//前一頁
    private int nextPage;//後一頁
    private boolean isFirstPage;//是否是第一頁
    private boolean isLastPage;//是否是最後一頁
    private boolean hasPreviousPage;//是否有前一頁
    private boolean hasNextPage;//是否有後一頁
    private int navigatePages;//導航欄頁碼數
    private int[] navigatepageNums;//所有導航欄號
    private int navigateFirstPage;//顯示的導航欄的第一頁
    private int navigateLastPage;//顯示的導航的最後一頁

//似乎不完整 total 總記錄數 List<T>list 結果集(每頁顯示的資料)

獲取所有資料(註解版的mybatis)

@Select("select * from tb_user")
public List<User> findUserList();

controller:(注意塗顏色的地方)

    @GetMapping("/stuList")
    public ModelAndView page(@RequestParam(required = false, defaultValue = "1", value = "pn

") Integer pn,
                             Model model) {
        //pageSize:當前頁面顯示資料條數
        PageHelper.startPage(pn, 10);

        List<User> users = userService.findUserList();
        model.addAttribute("students", users);

        //navigatePages:導航欄頁碼數
        PageInfo<User> pageInfo = new PageInfo(users, 5);

        return new ModelAndView("admin/studentList", "pageInfo", pageInfo);
    }

顯示頁(注意紅色地方,)

<div class="row">
    <div class="col-md-6">
        <h5>當前第[[${pageInfo.pageNum }]]頁,總[[${pageInfo.pages }]]頁,總[[${pageInfo.total }]]條記錄
        </h5>
    </div>

    <div class="col-md-6">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <!--首頁 和 上一頁-->
                <li>
                    <a th:href="@{/stuList}" class="btn btn-sm">
                        首頁
                    </a>
                </li>

                <th:if test="${pageInfo.hasPreviousPage - 1} > 0">
                    <li>
                        <a th:href="@{/stuList(pn=${pageInfo.pageNum - 1})}"
                           aria-label="Previous" class="btn btn-sm"
                           data-th-classappend="${(pageInfo.pageNum - 1) eq 0} ? 'disabled' : ''">
                            <
                        </a>

                    </li>
                </th:if>

                <!--迭代生成頁碼-->
                <li>

                    <a th:each="i:${pageInfo.navigatepageNums}"
                       th:href="@{/stuList(pn=${i})}"
                       th:text="${i}" class="btn btn-sm"
                       data-th-classappend="${(pageInfo.pageNum) eq i} ? 'btn-info' : ''">
                    </a>

                </li>

                <!--下一頁 和 末頁-->
                <th:if test="${pageInfo.hasNextPage }">
                    <li>

                        <a aria-label="Next" class="btn btn-sm"
                           th:href="@{/stuList(pn=${pageInfo.pageNum + 1})}"
                        data-th-classappend="${(pageInfo.pageNum) eq (pageInfo.pages)} ? 'disabled' : ''">
                            >
                        </a>

                    </li>
                </th:if>

                <li>

                    <a th:href="@{/stuList(pn=${pageInfo.pages})}" class="btn btn-sm">
                        末頁
                    </a>

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

</div>

淡紫色的地方是對上一頁和下一頁的判斷是否禁用

到此如果順利的話就大功告成了