- Реализовал доработки, уменьшающие количество ссылок в пагинаторе.

Часто возникает ситуация, когда при разбиении контента на страницы, мы получаем большое количество страниц и ссылки на эти страницы также требуют много места. В такой ситуации стоит сократить вывод ссылок в пагинаторе.

https://www.youtube.com/watch?v=Sc3EQBy0tuk&list=PLU2ftbIeotGpAYRP9Iv2KLIwK36-o_qYk&index=28

src/main/java/net/sytes/kashey/sweater/controller/MainController.java

@@ -5,6 +5,9 @@ import net.sytes.kashey.sweater.domain.Message;
 import net.sytes.kashey.sweater.repository.MessageRepository;
 import net.sytes.kashey.sweater.security.CustomUserDetails;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.data.domain.Pageable;
+import org.springframework.data.domain.Sort;
+import org.springframework.data.web.PageableDefault;
 import org.springframework.security.core.annotation.AuthenticationPrincipal;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
@@ -35,14 +38,17 @@ public class MainController {
     }
 
     @GetMapping("/main")
-    public String findAllMessages(@RequestParam(required = false, defaultValue = "") String tag, Model model) {
+    public String findAllMessages(@RequestParam(required = false, defaultValue = "") String tag,
+                                  Model model,
+                                  @PageableDefault(sort = {"id"}, direction = Sort.Direction.DESC) Pageable pageable) {
 
         if (tag == null || tag.isEmpty()) {
-            model.addAttribute("messages", messageRepository.findAll());
+            model.addAttribute("page", messageRepository.findAll(pageable));
         } else {
-            model.addAttribute("messages", messageRepository.findByTag(tag));
+            model.addAttribute("page", messageRepository.findByTag(tag, pageable));
         }
         model.addAttribute("tag", tag);
+        model.addAttribute("url", "/main");
         return "main";
     }
 
@@ -51,6 +57,7 @@ public class MainController {
                              @Valid Message message,
                              BindingResult bindingResult,
                              Model model,
+                             @PageableDefault(sort = {"id"}, direction = Sort.Direction.DESC) Pageable pageable,
                              @RequestParam("file") MultipartFile file
     ) throws IOException {
 
@@ -65,7 +72,8 @@ public class MainController {
             messageRepository.save(message);
             model.addAttribute("message", null);
         }
-        model.addAttribute("messages", messageRepository.findAll());
+        model.addAttribute("page", messageRepository.findAll(pageable));
+        model.addAttribute("url", "/main");
         model.addAttribute("tag", "");
         return "main";
     }

src/main/java/net/sytes/kashey/sweater/repository/MessageRepository.java

@@ -1,10 +1,13 @@
 package net.sytes.kashey.sweater.repository;
 
 import net.sytes.kashey.sweater.domain.Message;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 import org.springframework.data.repository.CrudRepository;
 
-import java.util.List;
-
 public interface MessageRepository extends CrudRepository<Message, Integer> {
-     List<Message> findByTag(String tag);
+
+    Page<Message> findByTag(String tag, Pageable pageable);
+
+    Page<Message> findAll(Pageable pageable);
 }

src/main/resources/templates/parts/messageList.ftl

@@ -1,25 +1,29 @@
 <#include "security.ftl">
+<#import "pager.ftl" as p>
 
-<div class="row row-cols-1 row-cols-md-3 g-4" id="message-list">
-    <#list messages as message>
-        <div class="col">
-            <div class="card h-100" data-id="${message.id}"> <!-- h-100 делает карточки одинаковой высоты -->
-                <#if message.filename??>
-                    <img src="/img/${message.filename}" class="card-img-top">
-                </#if>
-                <div class="card-body">
-                    <span>${message.text}</span><br/>
-                    <i>#${message.tag}</i>
-                </div>
-                <div class="card-footer d-flex justify-content-between">
-                    <a href="/user-messages/${message.author.id}"> ${message.authorName} </a>
-                    <#if message.author.id == currentUserId>
-                        <a class="btn btn-primary btn-sm" href="/user-messages/${message.author.id}?message=${message.id}">Edit</a>
+<@p.pager url page! />
+    <div class="row row-cols-1 row-cols-md-3 g-4" id="message-list">
+        <#list page.content as message>
+            <div class="col">
+                <div class="card h-100" data-id="${message.id}"> <!-- h-100 делает карточки одинаковой высоты -->
+                    <#if message.filename??>
+                        <img src="/img/${message.filename}" class="card-img-top">
                     </#if>
+                    <div class="card-body">
+                        <span>${message.text}</span><br/>
+                        <i>#${message.tag}</i>
+                    </div>
+                    <div class="card-footer d-flex justify-content-between">
+                        <a href="/user-messages/${message.author.id}"> ${message.authorName} </a>
+                        <#if message.author.id == currentUserId>
+                            <a class="btn btn-primary btn-sm"
+                               href="/user-messages/${message.author.id}?message=${message.id}">Edit</a>
+                        </#if>
+                    </div>
                 </div>
             </div>
-        </div>
-    <#else>
-        <p>No messages found</p>
-    </#list>
-</div>
+        <#else>
+            <p>No messages found</p>
+        </#list>
+    </div>
+<@p.pager url page />

src/main/resources/templates/parts/pager.ftl

@@ -0,0 +1,56 @@
+<#macro pager url page>
+    <#if page.getTotalPages() gt 7>
+        <#assign
+        totalPages = page.getTotalPages()
+        pageNumber = page.getNumber() + 1
+
+        head = (pageNumber > 4)?then([1, -1], [1, 2, 3])
+        tail = (pageNumber < totalPages - 3)?then([-1, totalPages], [totalPages - 2, totalPages - 1, totalPages])
+        bodyBefore = (pageNumber > 4 && pageNumber < totalPages - 1)?then([pageNumber - 2, pageNumber - 1], [])
+        bodyAfter = (pageNumber > 2 && pageNumber < totalPages - 3)?then([pageNumber + 1, pageNumber + 2], [])
+
+        body = head + bodyBefore + (pageNumber > 3 && pageNumber < totalPages - 2)?then([pageNumber], []) + bodyAfter + tail
+        >
+    <#else>
+        <#assign body = 1..page.getTotalPages()>
+    </#if>
+    <div class="mt-3">
+        <ul class="pagination">
+            <li class="page-item disabled">
+                <a class="page-link" href="#" tabindex="-1">Pages</a>
+            </li>
+            <#list body as p>
+                <#if (p - 1) == page.getNumber()>
+                    <li class="page-item active">
+                        <a class="page-link" href="#" tabindex="-1">${p}</a>
+                    </li>
+                <#elseif p == -1>
+                    <li class="page-item disabled">
+                        <a class="page-link" href="#" tabindex="-1">...</a>
+                    </li>
+                <#else>
+                    <li class="page-item">
+                        <a class="page-link" href="${url}?page=${p - 1}&size=${page.getSize()}" tabindex="-1">${p}</a>
+                    </li>
+                </#if>
+            </#list>
+        </ul>
+
+        <ul class="pagination">
+            <li class="page-item disabled">
+                <a class="page-link" href="#" tabindex="-1">Items per page</a>
+            </li>
+            <#list [5, 10, 25, 50] as c>
+                <#if c == page.getSize()>
+                    <li class="page-item active">
+                        <a class="page-link" href="#" tabindex="-1">${c}</a>
+                    </li>
+                <#else>
+                    <li class="page-item">
+                        <a class="page-link" href="${url}?page=${page.getNumber()}&size=${c}" tabindex="-1">${c}</a>
+                    </li>
+                </#if>
+            </#list>
+        </ul>
+    </div>
+</#macro>