SpringBoot帶省略號的翻頁實現（不使用帶三方插件）方案一（轉載）

原創 瓜子妹 2020-06-29 13:35

轉載地址：https://liuyanzhao.com/8125.html

方案二傳送陣：https://blog.csdn.net/thankna/article/details/105600475 （方案一簡化版）

方案三傳送陣：https://blog.csdn.net/thankna/article/details/105933927（方案二基礎上支持複雜sql文）

最近工作中用到，網上查資料，大部分都是代碼片段，對前後臺接口描述不詳，不方便照方抓藥。

下面這篇是我花了2天時間，在網上最完整的，我參照這個方案寫了自己的代碼，後面會放出方案二（是我自己寫的代碼）。

！！！注意：轉載這篇使用SpringBoot1.X，Spring Boot 2.0之後已經廢棄new PageRequest()方法，換用靜態方法PageRequest.of(pageNum,pageSize,Sort.Direction…..)。

SpringBoot + Spring Data JPA + Thmeleaf 分頁

效果圖
標題

一、Controller

/**
    * ajax 獲取評論頁面數據
    *
    * @param postId
    * @param model
    * @return
    */
   @GetMapping
   public ModelAndView listComments(
           @RequestParam(value = "postId") Long postId,
           @RequestParam(value = "async", required = false, defaultValue = "new") Boolean async,
           @RequestParam(value = "order", required = false, defaultValue = "new") String order,
           @RequestParam(value = "pageIndex", required = false, defaultValue = "1") Integer pageIndex,
           @RequestParam(value = "pageSize", required = false, defaultValue = "1") Integer pageSize,
           Model model) {
       Page<Comment> commentPage = null;
       Post post = postService.getPostById(postId);
       String commentOrder = "new";
       try {
           if (order.equals("hot")) { // 最熱查詢
               Sort sort = new Sort(Sort.Direction.DESC, "zanSize", "id");  //根據點贊數量排序
               Pageable pageable = new PageRequest(pageIndex - 1, pageSize, sort);
               commentPage = commentService.listCommentByPost(post, pageable);
               commentOrder = "hot";
           } else if (order.equals("new")) { // 最新查詢
               Sort sort = new Sort(Sort.Direction.DESC, "id");
               Pageable pageable = new PageRequest(pageIndex - 1, pageSize, sort);
               commentPage = commentService.listCommentByPost(post, pageable);
           }
       } catch (Exception e) {
           Pageable pageable = new PageRequest(0, 10);
           commentPage = commentService.listCommentByPost(post, pageable);
       }
       Integer commentSize = post.getCommentSize();
       model.addAttribute("page", commentPage);
       model.addAttribute("commentSize", commentSize);
       model.addAttribute("commentOrder", commentOrder);
       model.addAttribute("post", post);
       return new ModelAndView(async == true ? "home/post_detail :: #comment" : "home/post_detail");
   }

二、HTML 代碼

1、post_detail.html

本項目使用了 Spring Security ，開啓了 CSRF 防護，所以需要在 head 裏引入

<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>

這是 Thymeleaf 的替換標籤

<!--分頁-->
<div th:replace="~{home/fragments/page :: header-page}"></div>
<!--/分頁-->

頁面底部，引入 JS，將文章的id postId 傳到 js 裏

<script th:inline="javascript">
    var postId = [[${post.id}]];
    var postUrl = '/' + [[${post.user.username}]] + '/posts/' + [[${post.id}]];
</script>

page.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分頁</title>
</head>
<body>
<div data-th-fragment="header-page">
    <div class="header-page paging-box"
         th:if="${(page.totalPages gt 0) && (page.totalPages le 7)}"
         data-th-attr="data-order=${commentOrder}">
        <span class="result">共[[${page.totalPages}]]頁</span>
        <a href="javascript:void(0)" class="page-link prev"
           th:classappend="${page.first?'disabled':''}"
           data-th-attr="pageIndex=${page.number}">上一頁</a>
        <a href="javascript:void(0)" class="page-link"
           th:classappend="${(page.number+1) eq i} ?'current':''"
           th:each="i: ${#numbers.sequence(1, page.totalPages)}"
           data-th-attr="pageIndex=${i}">[[${i}]]</a>
        <a href="javascript:void(0)" class="page-link next"
           th:classappend="${page.last?'disabled':''}"
           data-th-attr="pageIndex=${page.number+2}">下一頁</a>
    </div>
    <div class="header-page paging-box"
         th:if="${page.totalPages gt 7}"
         data-th-attr="data-order=${commentOrder}">
        <span class="result">共[[${page.totalPages}]]頁</span>
        <!--上一頁-->
        <a href="javascript:void(0)" class="page-link prev"
           th:classappend="${page.first?'disabled':''}"
           data-th-attr="pageIndex=${page.number}">上一頁</a>
        <!--首頁-->
        <a href="javascript:void(0)" class="page-link"
           th:classappend="${(page.number+1) eq 1} ?'current':''"
           data-th-attr="pageIndex=1">
            1
        </a>
        <!-- 當前頁面小於等於4 -->
        <a href="javascript:void(0)" class="page-link"
           th:if="${(page.number+1) le 4}"
           th:classappend="${(page.number+1) eq i} ?'current':''"
           data-th-each="i : ${#numbers.sequence(2,5)}"
           data-th-attr="pageIndex=${i}">[[${i}]]</a>
        <span class="dian" data-th-if="${(page.number + 1) le 4}">...</span>
        <!-- 最後一頁與當前頁面之差，小於等於3 -->
        <span class="dian"
              data-th-if="${(page.totalPages-(page.number + 1)) le 3}">...</span>
        <a href="javascript:void(0)" class="page-link"
           th:if="${(page.totalPages-(page.number + 1)) le 3}"
           th:classappend="${(page.number+1) eq i} ?'current':''"
           th:each="i : ${#numbers.sequence(page.totalPages-4, page.totalPages-1)}"
           data-th-attr="pageIndex=${i}">[[${i}]]</a>
        <!-- 最後一頁與當前頁面之差大於3，且當前頁面大於4-->
        <span class="dian"
              data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">...</span>
        <a href="javascript:void(0)" class="page-link"
           th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
           data-th-attr="pageIndex=${page.number}">[[${page.number}]]</a>
        <a href="javascript:void(0)" class="page-link current"
           th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
           data-th-attr="pageIndex=${page.number+1}">[[${page.number
            +1 }]]</a>
        <a href="javascript:void(0)" class="page-link"
           th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
           data-th-attr="pageIndex=${page.number+2}">[[${page.number
            +2 }]]</a>
        <span class="dian" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">...</span>
        <!--尾頁-->
        <a href="javascript:void(0)" class="page-link"
           th:classappend="${(page.number+1) eq page.totalPages} ?'current':''"
           data-th-attr="pageIndex=${page.totalPages}">
            [[${page.totalPages}]]
        </a>
        <!--下一頁-->
        <a href="javascript:void(0)" class="page-link next"
           th:classappend="${page.last?'disabled':''}"
           data-th-attr="pageIndex=${page.number+2}">下一頁</a>
    </div>
</div>
<div data-th-fragment="bottom-page">
    <div class="bottom-page paging-box-big" th:if="${(page.totalPages gt 0) && (page.totalPages le 7)}"
         data-th-attr="data-order=${commentOrder}">
        <a href="javascript:void(0)" class="page-link prev"
           th:classappend="${page.first?'disabled':''}"
           data-th-attr="pageIndex=${page.number}">上一頁</a>
        <a href="javascript:void(0)" class="page-link"
           th:classappend="${(page.number+1) eq i} ?'current':''"
           th:each="i: ${#numbers.sequence(1, page.totalPages)}"
           data-th-attr="pageIndex=${i}">[[${i}]]</a>
        <a href="javascript:void(0)" class="page-link next"
           th:classappend="${page.last?'disabled':''}"
           data-th-attr="pageIndex=${page.number+2}">下一頁</a>
        <div class="page-jump">共<span>[[${page.totalPages}]]</span>頁，跳至
            <input type="number" class="jump-page-size" th:max="${page.totalPages}">頁
        </div>
    </div>
    <div class="bottom-page paging-box-big"
         th:if="${page.totalPages gt 7}"
         data-th-attr="data-order=${commentOrder}">
        <!--上一頁-->
        <a href="javascript:void(0)" class="page-link prev"
           th:classappend="${page.first?'disabled':''}"
           data-th-attr="pageIndex=${page.number}">上一頁</a>
        <!--首頁-->
        <a href="javascript:void(0)" class="page-link"
           th:classappend="${(page.number+1) eq 1} ?'current':''"
           data-th-attr="pageIndex=1">
            1
        </a>
        <!-- 當前頁面小於等於4 -->
        <a href="javascript:void(0)" class="page-link"
           th:if="${(page.number+1) le 4}"
           th:classappend="${(page.number+1) eq i} ?'current':''"
           data-th-each="i : ${#numbers.sequence(2,5)}"
           data-th-attr="pageIndex=${i}">[[${i}]]</a>
        <span class="dian" data-th-if="${(page.number + 1) le 4}">...</span>
        <!-- 最後一頁與當前頁面之差，小於等於3 -->
        <span class="dian"
              data-th-if="${(page.totalPages-(page.number + 1)) le 3}">...</span>
        <a href="javascript:void(0)" class="page-link"
           th:if="${(page.totalPages-(page.number + 1)) le 3}"
           th:classappend="${(page.number+1) eq i} ?'current':''"
           th:each="i : ${#numbers.sequence(page.totalPages-4, page.totalPages-1)}"
           data-th-attr="pageIndex=${i}">[[${i}]]</a>
        <!-- 最後一頁與當前頁面之差大於3，且當前頁面大於4-->
        <span class="dian"
              data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">...</span>
        <a href="javascript:void(0)" class="page-link"
           th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
           data-th-attr="pageIndex=${page.number}">[[${page.number}]]</a>
        <a href="javascript:void(0)" class="page-link current"
           th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
           data-th-attr="pageIndex=${page.number+1}">[[${page.number
            +1 }]]</a>
        <a href="javascript:void(0)" class="page-link"
           th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
           data-th-attr="pageIndex=${page.number+2}">[[${page.number
            +2 }]]</a>
        <span class="dian" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">...</span>
        <!--尾頁-->
        <a href="javascript:void(0)" class="page-link"
           th:classappend="${(page.number+1) eq page.totalPages} ?'current':''"
           data-th-attr="pageIndex=${page.totalPages}">
            [[${page.totalPages}]]
        </a>
        <!--下一頁-->
        <a href="javascript:void(0)" class="page-link next"
           th:classappend="${page.last?'disabled':''}"
           data-th-attr="pageIndex=${page.number+2}">下一頁</a>
        <div class="page-jump">共<span>[[${page.totalPages}]]</span>頁，跳至
            <input type="number" name="pageIndex" class="jump-page-size" min="1" th:max="${page.totalPages}">頁
        </div>
    </div>
    <script>
        var pageIndex = [[${page.number+1}]]
    </script>
</div>
</body>
</html>

因爲很多頁面都要使用分頁，所以完全可以把分頁的代碼剝離出來，公共使用。只需要將分頁的數據的 model 寫成 page 就行。這裏分頁分成了兩種，一種是分頁少於等於7個的，我們直接顯示 1234567；另一種是大於7 的，則中間以..分隔。

三、JS 代碼

$(function () {
    // 獲取評論列表
    function getComment(postId, pageIndex, order) {
        var _ctx = $("meta[name='ctx']").attr("content");
        // 獲取 CSRF Token
        var token = $("meta[name='_csrf']").attr("content");
        var header = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            url: _ctx + '/comments',
            type: 'GET',
            data: {
                "async": true,
                "postId": postId,
                "pageIndex": pageIndex,
                "order": order
            },
            beforeSend: function (request) {
                request.setRequestHeader(header, token); // 添加  CSRF Token
            },
            success: function (data) {
                $("#comment-wrapper").html(data);
            },
            error: function () {
                layer.msg("出現錯誤，請嘗試刷新頁面!", {icon: 2, anim: 6});
            }
        });
    };
    //切換評論排序規則
    $(document).on('click', '.tabs-order .new-sort', function () {
        var pageIndex = $(this).attr("pageIndex");
        getComment(postId, pageIndex, "new");
    });
    $(document).on('click', '.tabs-order .hot-sort', function () {
        var pageIndex = $(this).attr("pageIndex");
        getComment(postId, pageIndex, "hot");
    });
    //分頁獲取評論列表
    $(document).on('click', '.tcd-number', function () {
        var order = $(this).parents(".paging-box").attr("data-order");
        if ($(this).hasClass('current')) {
            return false;
        }
        var pageIndex = $(this).attr("pageIndex");
        getComment(postId, pageIndex, order);
    });
    //跳轉到指定的頁號
    $(document).on('keydown', '.jump-page-size', function (event) {
        var max = parseInt($(this).attr("max"));
        var pageIndex = parseInt($(this).val());
        var order = $('.paging-box').attr('data-order');
        if (event.keyCode == "13") {//keyCode=13是回車鍵
            if (pageIndex == "" || pageIndex == null) {
                return false;
            }
            if (!/^\d+$/.test(pageIndex)) {
                pageIndex = 1;
            }
            if (pageIndex < 1) {
                pageIndex = 1;
            }
            if (pageIndex > max) {
                pageIndex = max;
            }
            getComment(postId, pageIndex, order);
        }
    })
// 初始化 博客評論列表
    getComment(postId, 1, "new");
})

四、CSS 代碼

爲了方便大家的使用，這裏同時提供 CSS 代碼。

注：本模板是扒自嗶哩嗶哩，侵刪

page.css

.paging-box {
    font-size: 12px
}
.paging-box .disabled {
    cursor: not-allowed
}
.paging-box .current, .paging-box .dian, .paging-box .next, .paging-box .prev, .paging-box .tcd-number {
    color: #222;
    cursor: pointer;
    text-align: center;
    margin: 0 4px;
    text-decoration: none;
    line-height: 26px
}
.paging-box .current:hover, .paging-box .dian:hover, .paging-box .next:hover, .paging-box .prev:hover, .paging-box .tcd-number:hover {
    color: #00a1d6
}
.paging-box .current {
    color: #00a1d6;
    font-weight: 700
}
.paging-box .dian {
    cursor: default
}
.paging-box .dian:hover {
    color: #222
}
.paging-box .result {
    padding-right: 10px
}
.paging-box-big {
    font-size: 12px
}
.paging-box-big .disabled {
    display: none
}
.paging-box-big .current, .paging-box-big .dian, .paging-box-big .next, .paging-box-big .prev, .paging-box-big .tcd-number {
    color: #222;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ddd;
    background-image: none;
    transition: all .2s;
    font-size: 14px;
    min-width: 15px;
    margin: 0 2px;
    padding: 0 13px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    text-decoration: none
}
.paging-box-big .current, .paging-box-big .current:hover, .paging-box-big .dian:hover, .paging-box-big .next:hover, .paging-box-big .prev:hover, .paging-box-big .tcd-number:hover {
    background: #00a1d6;
    color: #fff;
    border: 1px solid #00a1d6
}
.paging-box-big .dian {
    cursor: default;
    border-color: #fff
}
.paging-box-big .dian:hover {
    background: #fff;
    color: #222;
    border: 1px solid #fff
}
.paging-box-big .next, .paging-box-big .prev {
    padding: 0 15px
}
.paging-box-big .page-jump {
    float: rightright;
    color: #99a2aa;
    line-height: 36px
}
.paging-box-big .page-jump input {
    margin: 0 5px;
    padding: 0 2px;
    height: 24px;
    line-height: 24px;
    margin-top: 7px;
    font-size: 12px;
    box-shadow: none;
    width: 40px;
    border-radius: 4px;
    border: 1px solid #ddd;
    outline: 0;
    text-align: center
}
.paging-box-big .page-jump input:focus {
    border-color: #00a1d6
}

五、補充

1、Spring Data JPA 提供了分頁器，可以直接使用。

/**
 * 根據文章獲取評論，分頁顯示
 *
 * @param post
 * @param pid
 * @return
 */
Page<Comment> findByPostAndPid(Post post, Long pid, Pageable pageable);

其中 pageable 可以通過創建 PageRequest 對象獲得，需要傳入 page 頁碼，size 一頁顯示數量。sort 是排序規則，相當於 sql 語句裏的 order by，可選。

Sort sort = new Sort(Sort.Direction.DESC, "zanSize", "id");
Pageable pageable = new PageRequest(pageIndex - 1, pageSize, sort);

2、將現成 List 轉成 Page，也可以這樣

List<Comment> commentList = post.getCommentList()
PageRequest pageRequest = new PageRequest(pageIndex,pageSize);
Page<Comment> commentPage = new PageImpl<Comment>(commentList,pageRequest,commentList.size());

3、page 對象的幾個屬性

總共頁數：${userDTOPage.totalPages}
記錄總數：${userDTOPage.totalElements}
當前頁號：${userDTOPage.number}
是否爲首頁：${userDTOPage.first}
是否爲尾頁：${userDTOPage.last}
每頁顯示的數量：${userDTOPage.numberOfElements}

END

這篇沒有GitHub代碼。代碼都在文案上，大家自己複製吧。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JavaScript instanceof理解及與typeof對比

經常有人會在JavaScript裏寫如下的方法： function checkType() { var s1 = 123; var s2 = "OK

xywlzd 2020-07-03 22:34:12

基於JQuery的cookie插件

JQuery居然沒有操作cookie相關的函數，搜了下官方有個cookie的插件。 簡單使用方法： <html> <head> <title>JQuery-Cookie插件</title> <script type="text/

xywlzd 2020-07-03 22:34:12

java處理json中的日期

import java.text.SimpleDateFormat; import java.util.Date; import java.util

dbeautifulLife 2020-06-30 21:55:56

通過url訪問外部服務器（request and response）

使用json與外部服務器交互，兩種方式。 第一種，使用阿里json jar，國內項目推薦，優點是不需要依賴包。 第二種，使用jdk原生json jar，需要依賴包（注意哪個版本json要對應哪個版本依賴包），國外項目使用。 依賴包如下：

瓜子妹 2020-06-29 13:35:16

springboot自動事務，手動事務

一，自動事務 1.啓動類追加註解 @EnableTransactionManagement 2.在service的方法上加註解 或者在controller的方法上加註解 看具體業務需求 @Transactional(rollbackFor

瓜子妹 2020-06-29 13:35:16

Amazon S3文件上傳下載（springboot）

pom依賴 <dependency> <groupId>com.amazonaws</groupId> <artifactId>aws-java-sdk-s3</artifactId> <version>1.11.

瓜子妹 2020-06-29 13:35:16

通過shell調用spring batch

先在windows中編譯成batch.jar shell文【bt0007_start.sh】 主執行語句，執行bt0007Job，baseDate是啓動參數 java -jar /opt/iij/batch-1.0.0.jar bt00

瓜子妹 2020-06-29 13:35:16

springboot中logback只輸出指定log（一種攔截自動輸出每個request的log，一種只輸出class中手動加入的log【模仿log4j】）

上次寫了一個通用logback（下面的鏈接），log信息是全面，但有很多運行log對開發運營人員是無用，這些冗餘log影響開發人員閱讀。 https://blog.csdn.net/thankna/article/details/1059

瓜子妹 2020-06-29 13:35:16

200萬件壓力測試，影響速度的案例

案例1： 前提：batch執行，從文件讀入10萬條數據，insert到數據庫中，沒有中間commit（win10、postgresql）。 問題：5萬件執行時間00:01:15，10萬件執行時間01:05:00。 原因：沒有commit，

瓜子妹 2020-06-29 13:35:15

springboot SHA256加鹽（加密算法）

pom 使用下記引用爲了引入 commons-codec-1.13.jar <dependency> <groupId>com.amazonaws</groupId> <artifactId>aws-java-sdk-c

瓜子妹 2020-06-29 13:35:15

spingboot開發logback.xml通用配置(無需改動，支持SQL文和異常系打印，放到src/main/resouces既可使用)

需要輸出指定內容，請參見。 https://blog.csdn.net/thankna/article/details/106190036 spingboot開發用常規logback.xml配置(無需改動，放到src/main/resou

瓜子妹 2020-06-29 13:35:15

lombok在eclipse和IntelliJ Idea中不生效的解決方案

1.eclipse 修改eclipse.ini文件，追加下記 -Xbootclasspath/a:lombok-1.18.8.jar -javaagent:lombok-1.18.8.jar 重啓eclipse，ok。 2.Int

瓜子妹 2020-06-29 13:35:15

xml解析學習

 XML解析的簡介（寫到java代碼）     1、xml是標記型文檔     2、xml的解析方式（技術）：dom和sax     3、js使用dom解析標記型文檔，dom解析。         根據html的層級結構，在內存中分配一

Aries、zn 2020-06-23 05:24:28

Font Awesome5.x 頁面引入的幾種方式和應用,及與4.x的變化

在做網頁開發中,前端頁面顯示時經常會用到字體庫圖標,如 iconfont, fontawesome, glyphicons, lonicons等.下面是各字體圖標的網站: iconfont fontawesome5.11 或 f

smile radiantly 2020-06-21 18:55:01

PageHelper分頁插件及相關案例介紹

pagehelper是一個分頁插件,用來後端API進行分頁處理,pagehelper只需要pageNum(當前頁)和pageSize(頁大小)就可以自動實現查詢的分頁數據.只對緊接着後續一條查詢語句起作用. 項目運行成功後,查詢語

smile radiantly 2020-06-21 18:55:01