SpringBoot + Spring Data JPA + Thmeleaf 分页实现仿哔哩哔哩

avatar 2018年05月06日17:21:42 14 7772 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
之前介绍过一次 SpringBoot + Spring Data JPA + Thymeleaf 分页，但是不够详细，这次再重新发一次。



先看效果图，动态图，可以点击放大。

因为数据有限，效果图里是设置一页显示一条记录。





这里是以评论列表作为例子，主要贴出和分页有关的代码，至于 Dao 和 Service 这里省略。


一、Controller

  1. /**
  2.     * ajax 获取评论页面数据
  3.     *
  4.     * @param postId
  5.     * @param model
  6.     * @return
  7.     */
  8.    @GetMapping
  9.    public ModelAndView listComments(
  10.            @RequestParam(value = "postId") Long postId,
  11.            @RequestParam(value = "async", required = false, defaultValue = "new") Boolean async,
  12.            @RequestParam(value = "order", required = false, defaultValue = "new") String order,
  13.            @RequestParam(value = "pageIndex", required = false, defaultValue = "1") Integer pageIndex,
  14.            @RequestParam(value = "pageSize", required = false, defaultValue = "1") Integer pageSize,
  15.            Model model) {
  18.        Page<Comment> commentPage = null;
  19.        Post post = postService.getPostById(postId);
  21.        String commentOrder = "new";
  22.        try {
  23.            if (order.equals("hot")) { // 最热查询
  24.                Sort sort = new Sort(Sort.Direction.DESC, "zanSize", "id");  //根据点赞数量排序
  25.                Pageable pageable = new PageRequest(pageIndex - 1, pageSize, sort);
  26.                commentPage = commentService.listCommentByPost(post, pageable);
  27.                commentOrder = "hot";
  28.            } else if (order.equals("new")) { // 最新查询
  29.                Sort sort = new Sort(Sort.Direction.DESC, "id");
  30.                Pageable pageable = new PageRequest(pageIndex - 1, pageSize, sort);
  31.                commentPage = commentService.listCommentByPost(post, pageable);
  32.            }
  33.        } catch (Exception e) {
  34.            Pageable pageable = new PageRequest(0, 10);
  35.            commentPage = commentService.listCommentByPost(post, pageable);
  36.        }
  39.        Integer commentSize = post.getCommentSize();
  40.        model.addAttribute("page", commentPage);
  41.        model.addAttribute("commentSize", commentSize);
  42.        model.addAttribute("commentOrder", commentOrder);
  43.        model.addAttribute("post", post);
  44.        return new ModelAndView(async == true ? "home/post_detail :: #comment" : "home/post_detail");
  45.    }


二、HTML 代码


1、post_detail.html

本项目使用了 Spring Security ，开启了 CSRF 防护，所以需要在 head 里引入
  1. <meta name="_csrf" th:content="${_csrf.token}"/>
  2. <meta name="_csrf_header" th:content="${_csrf.headerName}"/>



这是 Thymeleaf 的替换标签
  1. <!--分页-->
  2. <div th:replace="~{home/fragments/page :: header-page}"></div>
  3. <!--/分页-->



页面底部，引入 JS，将文章的id postId 传到 js 里
  1. <script th:inline="javascript">
  2.     var postId = [[${post.id}]];
  3.     var postUrl = '/' + [[${post.user.username}]] + '/posts/' + [[${post.id}]];
  4. </script>



page.html
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>分页</title>
  9. </head>
  10. <body>
  12. <div data-th-fragment="header-page">
  13.     <div class="header-page paging-box"
  14.          th:if="${(page.totalPages gt 0) && (page.totalPages le 7)}"
  15.          data-th-attr="data-order=${commentOrder}">
  16.         <span class="result">共[[${page.totalPages}]]页</span>
  17.         <a href="javascript:void(0)" class="page-link prev"
  18.            th:classappend="${page.first?'disabled':''}"
  19.            data-th-attr="pageIndex=${page.number}">上一页</a>
  20.         <a href="javascript:void(0)" class="page-link"
  21.            th:classappend="${(page.number+1) eq i} ?'current':''"
  22.            th:each="i: ${#numbers.sequence(1, page.totalPages)}"
  23.            data-th-attr="pageIndex=${i}">[[${i}]]</a>
  25.         <a href="javascript:void(0)" class="page-link next"
  26.            th:classappend="${page.last?'disabled':''}"
  27.            data-th-attr="pageIndex=${page.number+2}">下一页</a>
  29.     </div>
  31.     <div class="header-page paging-box"
  32.          th:if="${page.totalPages gt 7}"
  33.          data-th-attr="data-order=${commentOrder}">
  34.         <span class="result">共[[${page.totalPages}]]页</span>
  35.         <!--上一页-->
  36.         <a href="javascript:void(0)" class="page-link prev"
  37.            th:classappend="${page.first?'disabled':''}"
  38.            data-th-attr="pageIndex=${page.number}">上一页</a>
  40.         <!--首页-->
  41.         <a href="javascript:void(0)" class="page-link"
  42.            th:classappend="${(page.number+1) eq 1} ?'current':''"
  43.            data-th-attr="pageIndex=1">
  44.             1
  45.         </a>
  47.         <!-- 当前页面小于等于4 -->
  48.         <a href="javascript:void(0)" class="page-link"
  49.            th:if="${(page.number+1) le 4}"
  50.            th:classappend="${(page.number+1) eq i} ?'current':''"
  51.            data-th-each="i : ${#numbers.sequence(2,5)}"
  52.            data-th-attr="pageIndex=${i}">[[${i}]]</a>
  54.         <span class="dian" data-th-if="${(page.number + 1) le 4}">...</span>
  56.         <!-- 最后一页与当前页面之差，小于等于3 -->
  57.         <span class="dian"
  58.               data-th-if="${(page.totalPages-(page.number + 1)) le 3}">...</span>
  60.         <a href="javascript:void(0)" class="page-link"
  61.            th:if="${(page.totalPages-(page.number + 1)) le 3}"
  62.            th:classappend="${(page.number+1) eq i} ?'current':''"
  63.            th:each="i : ${#numbers.sequence(page.totalPages-4, page.totalPages-1)}"
  64.            data-th-attr="pageIndex=${i}">[[${i}]]</a>
  67.         <!-- 最后一页与当前页面之差大于3，且当前页面大于4-->
  68.         <span class="dian"
  69.               data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">...</span>
  71.         <a href="javascript:void(0)" class="page-link"
  72.            th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
  73.            data-th-attr="pageIndex=${page.number}">[[${page.number}]]</a>
  74.         <a href="javascript:void(0)" class="page-link current"
  75.            th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
  76.            data-th-attr="pageIndex=${page.number+1}">[[${page.number
  77.             +1 }]]</a>
  78.         <a href="javascript:void(0)" class="page-link"
  79.            th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
  80.            data-th-attr="pageIndex=${page.number+2}">[[${page.number
  81.             +2 }]]</a>
  83.         <span class="dian" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">...</span>
  86.         <!--尾页-->
  87.         <a href="javascript:void(0)" class="page-link"
  88.            th:classappend="${(page.number+1) eq page.totalPages} ?'current':''"
  89.            data-th-attr="pageIndex=${page.totalPages}">
  90.             [[${page.totalPages}]]
  91.         </a>
  93.         <!--下一页-->
  94.         <a href="javascript:void(0)" class="page-link next"
  95.            th:classappend="${page.last?'disabled':''}"
  96.            data-th-attr="pageIndex=${page.number+2}">下一页</a>
  98.     </div>
  99. </div>
  102. <div data-th-fragment="bottom-page">
  105.     <div class="bottom-page paging-box-big" th:if="${(page.totalPages gt 0) && (page.totalPages le 7)}"
  106.          data-th-attr="data-order=${commentOrder}">
  107.         <a href="javascript:void(0)" class="page-link prev"
  108.            th:classappend="${page.first?'disabled':''}"
  109.            data-th-attr="pageIndex=${page.number}">上一页</a>
  110.         <a href="javascript:void(0)" class="page-link"
  111.            th:classappend="${(page.number+1) eq i} ?'current':''"
  112.            th:each="i: ${#numbers.sequence(1, page.totalPages)}"
  113.            data-th-attr="pageIndex=${i}">[[${i}]]</a>
  115.         <a href="javascript:void(0)" class="page-link next"
  116.            th:classappend="${page.last?'disabled':''}"
  117.            data-th-attr="pageIndex=${page.number+2}">下一页</a>
  118.         <div class="page-jump">共<span>[[${page.totalPages}]]</span>页，跳至
  119.             <input type="number" class="jump-page-size" th:max="${page.totalPages}">页
  120.         </div>
  121.     </div>
  123.     <div class="bottom-page paging-box-big"
  124.          th:if="${page.totalPages gt 7}"
  125.          data-th-attr="data-order=${commentOrder}">
  126.         <!--上一页-->
  127.         <a href="javascript:void(0)" class="page-link prev"
  128.            th:classappend="${page.first?'disabled':''}"
  129.            data-th-attr="pageIndex=${page.number}">上一页</a>
  131.         <!--首页-->
  132.         <a href="javascript:void(0)" class="page-link"
  133.            th:classappend="${(page.number+1) eq 1} ?'current':''"
  134.            data-th-attr="pageIndex=1">
  135.             1
  136.         </a>
  138.         <!-- 当前页面小于等于4 -->
  139.         <a href="javascript:void(0)" class="page-link"
  140.            th:if="${(page.number+1) le 4}"
  141.            th:classappend="${(page.number+1) eq i} ?'current':''"
  142.            data-th-each="i : ${#numbers.sequence(2,5)}"
  143.            data-th-attr="pageIndex=${i}">[[${i}]]</a>
  145.         <span class="dian" data-th-if="${(page.number + 1) le 4}">...</span>
  148.         <!-- 最后一页与当前页面之差，小于等于3 -->
  149.         <span class="dian"
  150.               data-th-if="${(page.totalPages-(page.number + 1)) le 3}">...</span>
  152.         <a href="javascript:void(0)" class="page-link"
  153.            th:if="${(page.totalPages-(page.number + 1)) le 3}"
  154.            th:classappend="${(page.number+1) eq i} ?'current':''"
  155.            th:each="i : ${#numbers.sequence(page.totalPages-4, page.totalPages-1)}"
  156.            data-th-attr="pageIndex=${i}">[[${i}]]</a>
  159.         <!-- 最后一页与当前页面之差大于3，且当前页面大于4-->
  160.         <span class="dian"
  161.               data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">...</span>
  163.         <a href="javascript:void(0)" class="page-link"
  164.            th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
  165.            data-th-attr="pageIndex=${page.number}">[[${page.number}]]</a>
  166.         <a href="javascript:void(0)" class="page-link current"
  167.            th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
  168.            data-th-attr="pageIndex=${page.number+1}">[[${page.number
  169.             +1 }]]</a>
  170.         <a href="javascript:void(0)" class="page-link"
  171.            th:if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}"
  172.            data-th-attr="pageIndex=${page.number+2}">[[${page.number
  173.             +2 }]]</a>
  175.         <span class="dian" data-th-if="${((page.number + 1) gt 4) && ((page.totalPages-(page.number + 1)) gt 3 )}">...</span>
  178.         <!--尾页-->
  179.         <a href="javascript:void(0)" class="page-link"
  180.            th:classappend="${(page.number+1) eq page.totalPages} ?'current':''"
  181.            data-th-attr="pageIndex=${page.totalPages}">
  182.             [[${page.totalPages}]]
  183.         </a>
  185.         <!--下一页-->
  186.         <a href="javascript:void(0)" class="page-link next"
  187.            th:classappend="${page.last?'disabled':''}"
  188.            data-th-attr="pageIndex=${page.number+2}">下一页</a>
  190.         <div class="page-jump">共<span>[[${page.totalPages}]]</span>页，跳至
  191.             <input type="number" name="pageIndex" class="jump-page-size" min="1" th:max="${page.totalPages}">页
  192.         </div>
  194.     </div>
  196.     <script>
  197.         var pageIndex = [[${page.number+1}]]
  198.     </script>
  199. </div>
  200. </body>
  201. </html>

因为很多页面都要使用分页，所以完全可以把分页的代码剥离出来，公共使用。只需要将分页的数据的 model 写成 page 就行。这里分页分成了两种，一种是分页少于等于7个的，我们直接显示 1234567；另一种是大于7 的，则中间以..分隔。


三、JS 代码

  1. $(function () {
  3.     // 获取评论列表
  4.     function getComment(postId, pageIndex, order) {
  5.         var _ctx = $("meta[name='ctx']").attr("content");
  6.         // 获取 CSRF Token
  7.         var token = $("meta[name='_csrf']").attr("content");
  8.         var header = $("meta[name='_csrf_header']").attr("content");
  10.         $.ajax({
  11.             url: _ctx + '/comments',
  12.             type: 'GET',
  13.             data: {
  14.                 "async": true,
  15.                 "postId": postId,
  16.                 "pageIndex": pageIndex,
  17.                 "order": order
  18.             },
  19.             beforeSend: function (request) {
  20.                 request.setRequestHeader(header, token); // 添加  CSRF Token
  21.             },
  22.             success: function (data) {
  23.                 $("#comment-wrapper").html(data);
  25.             },
  26.             error: function () {
  27.                 layer.msg("出现错误，请尝试刷新页面!", {icon: 2, anim: 6});
  28.             }
  29.         });
  30.     };
  32.     //切换评论排序规则
  33.     $(document).on('click', '.tabs-order .new-sort', function () {
  34.         var pageIndex = $(this).attr("pageIndex");
  35.         getComment(postId, pageIndex, "new");
  36.     });
  37.     $(document).on('click', '.tabs-order .hot-sort', function () {
  38.         var pageIndex = $(this).attr("pageIndex");
  39.         getComment(postId, pageIndex, "hot");
  40.     });
  43.     //分页获取评论列表
  44.     $(document).on('click', '.tcd-number', function () {
  45.         var order = $(this).parents(".paging-box").attr("data-order");
  46.         if ($(this).hasClass('current')) {
  47.             return false;
  48.         }
  49.         var pageIndex = $(this).attr("pageIndex");
  50.         getComment(postId, pageIndex, order);
  51.     });
  54.     //跳转到指定的页号
  55.     $(document).on('keydown', '.jump-page-size', function (event) {
  56.         var max = parseInt($(this).attr("max"));
  57.         var pageIndex = parseInt($(this).val());
  58.         var order = $('.paging-box').attr('data-order');
  59.         if (event.keyCode == "13") {//keyCode=13是回车键
  60.             if (pageIndex == "" || pageIndex == null) {
  61.                 return false;
  62.             }
  63.             if (!/^\d+$/.test(pageIndex)) {
  64.                 pageIndex = 1;
  65.             }
  66.             if (pageIndex < 1) {
  67.                 pageIndex = 1;
  68.             }
  69.             if (pageIndex > max) {
  70.                 pageIndex = max;
  71.             }
  72.             getComment(postId, pageIndex, order);
  73.         }
  74.     })
  76. // 初始化 博客评论列表
  77.     getComment(postId, 1, "new");
  79. })


四、CSS 代码


为了方便大家的使用，这里同时提供 CSS 代码。

注：本模板是扒自哔哩哔哩，侵删

page.css
  1. .paging-box {
  2.     font-size: 12px
  3. }
  5. .paging-box .disabled {
  6.     cursor: not-allowed
  7. }
  9. .paging-box .current, .paging-box .dian, .paging-box .next, .paging-box .prev, .paging-box .tcd-number {
  10.     color: #222;
  11.     cursor: pointer;
  12.     text-align: center;
  13.     margin: 0 4px;
  14.     text-decoration: none;
  15.     line-height: 26px
  16. }
  18. .paging-box .current:hover, .paging-box .dian:hover, .paging-box .next:hover, .paging-box .prev:hover, .paging-box .tcd-number:hover {
  19.     color: #00a1d6
  20. }
  22. .paging-box .current {
  23.     color: #00a1d6;
  24.     font-weight: 700
  25. }
  27. .paging-box .dian {
  28.     cursor: default
  29. }
  31. .paging-box .dian:hover {
  32.     color: #222
  33. }
  35. .paging-box .result {
  36.     padding-right: 10px
  37. }
  39. .paging-box-big {
  40.     font-size: 12px
  41. }
  43. .paging-box-big .disabled {
  44.     display: none
  45. }
  47. .paging-box-big .current, .paging-box-big .dian, .paging-box-big .next, .paging-box-big .prev, .paging-box-big .tcd-number {
  48.     color: #222;
  49.     cursor: pointer;
  50.     text-align: center;
  51.     border-radius: 4px;
  52.     background-color: #fff;
  53.     border: 1px solid #ddd;
  54.     background-image: none;
  55.     transition: all .2s;
  56.     font-size: 14px;
  57.     min-width: 15px;
  58.     margin: 0 2px;
  59.     padding: 0 13px;
  60.     display: inline-block;
  61.     height: 36px;
  62.     line-height: 36px;
  63.     text-decoration: none
  64. }
  66. .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 {
  67.     background: #00a1d6;
  68.     color: #fff;
  69.     border: 1px solid #00a1d6
  70. }
  72. .paging-box-big .dian {
  73.     cursor: default;
  74.     border-color: #fff
  75. }
  77. .paging-box-big .dian:hover {
  78.     background: #fff;
  79.     color: #222;
  80.     border: 1px solid #fff
  81. }
  83. .paging-box-big .next, .paging-box-big .prev {
  84.     padding: 0 15px
  85. }
  87. .paging-box-big .page-jump {
  88.     float: rightright;
  89.     color: #99a2aa;
  90.     line-height: 36px
  91. }
  93. .paging-box-big .page-jump input {
  94.     margin: 0 5px;
  95.     padding: 0 2px;
  96.     height: 24px;
  97.     line-height: 24px;
  98.     margin-top: 7px;
  99.     font-size: 12px;
  100.     box-shadow: none;
  101.     width: 40px;
  102.     border-radius: 4px;
  103.     border: 1px solid #ddd;
  104.     outline: 0;
  105.     text-align: center
  106. }
  108. .paging-box-big .page-jump input:focus {
  109.     border-color: #00a1d6
  110. }




五、补充


1、Spring Data JPA 提供了分页器，可以直接使用。
  1. /**
  2.  * 根据文章获取评论，分页显示
  3.  *
  4.  * @param post
  5.  * @param pid
  6.  * @return
  7.  */
  8. Page<Comment> findByPostAndPid(Post post, Long pid, Pageable pageable);



其中 pageable 可以通过创建 PageRequest 对象获得，需要传入 page 页码，size 一页显示数量。sort 是排序规则，相当于 sql 语句里的 order by，可选。
  1. Sort sort = new Sort(Sort.Direction.DESC, "zanSize", "id");
  2. Pageable pageable = new PageRequest(pageIndex - 1, pageSize, sort);



2、将现成 List 转成 Page，也可以这样
  1. List<Comment> commentList = post.getCommentList()
  2. PageRequest pageRequest = new PageRequest(pageIndex,pageSize);
  3. Page<Comment> commentPage = new PageImpl<Comment>(commentList,pageRequest,commentList.size());



3、page 对象的几个属性
  1. 总共页数：${userDTOPage.totalPages}
  2. 记录总数：${userDTOPage.totalElements}
  3. 当前页号：${userDTOPage.number}
  4. 是否为首页：${userDTOPage.first}
  5. 是否为尾页：${userDTOPage.last}
  6. 每页显示的数量：${userDTOPage.numberOfElements}




六、其他分页内容


SpringBoot Spring Data JPA Thymeleaf 实现关注者和粉丝，互相关注分页显示


SpringMVC+Spring Data JPA + JSP + Bootstrap 分页实现和模糊查询分页


SSM + JSP 自定义分页













历史上的今天
五月
06日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：4   待审核评论数：0
  1. avatar 麦肯锡家
    回复 2021年01月16日 20:53:51

    请问点击不同的页码之后是怎么做到的不进行网页跳转的？

  2. avatar mckola_molas
    回复 2021年01月16日 20:11:54

    对了，这个分页的话是提早加载了还是显示某一页就加载特定的页呀？

    • avatar 言曌
      回复 2021年01月16日 20:12:54

      @mckola_molas: 请求后才加载，并不是预加载

      • avatar mckola_molas
        回复 2021年01月16日 20:14:31

        @言曌:我突然又发现了一个问题，可不可以用freemarker而不是Thmeleaf 实现这个功能吗？

        • avatar 言曌
          回复 2021年01月16日 20:15:53

          @mckola_molas:当然可以，跟什么模板没有太大关系，FreeMarker和Thymleaf我都用过

  3. avatar 远风
    回复 2018年09月11日 11:43:22

    Spring Boot 2.0之后已经废弃new PageRequest()方法，换用静态方法PageRequest.of(pageNum,pageSize,Sort.Direction.....)

  4. avatar q
    回复 2018年06月04日 20:49:08

    你好，有源码吗或者github