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

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

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

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

@@ -1,24 +1,54 @@
 <#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="#">Pages</a></li>
+            <li class="page-item disabled">
-            <#list 1..page.totalPages as p>
+                <a class="page-link" href="#" tabindex="-1">Pages</a>
-                <#if (p - 1) == page.number>
+            </li>
-                    <li class="page-item active"><a class="page-link" href="#">${p}</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.size}">${p}</a></li>
+                    <li class="page-item">
+                        <a class="page-link" href="${url}?page=${p - 1}&size=${page.getSize()}" tabindex="-1">${p}</a>
+                    </li>
                 </#if>
             </#list>
         </ul>
-    </div>
+
-    <div class="mt-3">
         <ul class="pagination">
-            <li class="page-item disabled"><a class="page-link" href="#">Items per page</a></li>
+            <li class="page-item disabled">
-            <#list [5, 10, 20, 50] as c>
+                <a class="page-link" href="#" tabindex="-1">Items per page</a>
-                <#if c  == page.size>
+            </li>
-                    <li class="page-item active"><a class="page-link" href="#">${c}</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.number}&size=${c}">${c}</a></li>
+                    <li class="page-item">
+                        <a class="page-link" href="${url}?page=${page.getNumber()}&size=${c}" tabindex="-1">${c}</a>
+                    </li>
                 </#if>
             </#list>
         </ul>