From 0f49a059e3c4459820e0ced5d36ffedcd5be0190 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20M=20Piva?=
 <55606913+andrempiva@users.noreply.github.com>
Date: Thu, 25 Sep 2025 14:42:47 -0300
Subject: [PATCH] Feat: add first and last buttons to pagination component
 (#4560)

* add first and last buttons to pagination

* Add i18n support

* Update pagination buttons font

---------

Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>
---
 public/lib/pagination.js | 72 ++++++++++++++++++++++++++++++++++++++--
 public/scripts/utils.js  |  2 ++
 public/style.css         |  3 +-
 3 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/public/lib/pagination.js b/public/lib/pagination.js
index f5e900d64..26c8868ab 100644
--- a/public/lib/pagination.js
+++ b/public/lib/pagination.js
@@ -139,9 +139,9 @@
         return el;
       },
 
-      getPageLinkTag: function(index) {
+      getPageLinkTag: function(text) {
         var pageLink = attributes.pageLink;
-        return pageLink ? `<a href="${pageLink}">${index}</a>` : `<a>${index}</a>`;
+        return pageLink ? `<a href="${pageLink}">${text}</a>` : `<a>${text}</a>`;
       },
 
       // Generate HTML for page numbers
@@ -233,6 +233,8 @@
 
         var prevText = attributes.prevText;
         var nextText = attributes.nextText;
+        var firstText = attributes.firstText;
+        var lastText = attributes.lastText;
         var goButtonText = attributes.goButtonText;
 
         var classPrefix = attributes.classPrefix;
@@ -240,6 +242,8 @@
         var ulClassName = attributes.ulClassName || '';
         var prevClassName = attributes.prevClassName || '';
         var nextClassName = attributes.nextClassName || '';
+        var firstClassName = attributes.firstClassName || '';
+        var lastClassName = attributes.lastClassName || '';
 
         var html = '';
         var sizeSelect = `<select class="J-paginationjs-size-select">`;
@@ -295,9 +299,11 @@
           if (showPrevious) {
             if (currentPage <= 1) {
               if (!autoHidePrevious) {
+                html += `<li class="${classPrefix}-first ${disableClassName} ${firstClassName}"><a>${firstText}</a></li>`;
                 html += `<li class="${classPrefix}-prev ${disableClassName} ${prevClassName}"><a>${prevText}</a></li>`;
               }
             } else {
+              html += `<li class="${classPrefix}-first J-paginationjs-first ${firstClassName}" data-num="1" title="First page">${getPageLinkTag(firstText)}</li>`;
               html += `<li class="${classPrefix}-prev J-paginationjs-previous ${prevClassName}" data-num="${currentPage - 1}" title="Previous page">${getPageLinkTag(prevText)}</li>`;
             }
           }
@@ -312,9 +318,11 @@
             if (currentPage >= totalPage) {
               if (!autoHideNext) {
                 html += `<li class="${classPrefix}-next ${disableClassName} ${nextClassName}"><a>${nextText}</a></li>`;
+                html += `<li class="${classPrefix}-last ${disableClassName} ${lastClassName}"><a>${lastText}</a></li>`;
               }
             } else {
               html += `<li class="${classPrefix}-next J-paginationjs-next ${nextClassName}" data-num="${currentPage + 1}" title="Next page">${getPageLinkTag(nextText)}</li>`;
+              html += `<li class="${classPrefix}-last J-paginationjs-last ${lastClassName}" data-num="${totalPage}" title="Last page">${getPageLinkTag(lastText)}</li>`;
             }
           }
           html += `</ul></div>`;
@@ -542,6 +550,14 @@
         this.go(this.model.pageNumber + 1, callback);
       },
 
+      first: function(callback) {
+        this.go(1, callback);
+      },
+
+      last: function(callback) {
+        this.go(this.model.totalPage, callback);
+      },
+
       disable: function() {
         var self = this;
         var source = self.isAsync ? 'async' : 'sync';
@@ -774,6 +790,38 @@
           if (!attributes.pageLink) return false;
         });
 
+        // First button click listener
+        el.on('click', '.J-paginationjs-first', function(event) {
+          var current = $(event.currentTarget);
+          var pageNumber = current.attr('data-num').trim();
+
+          if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
+
+          if (self.callHook('beforeFirstOnClick', event, pageNumber) === false) return false;
+
+          self.go(pageNumber);
+
+          self.callHook('afterFirstOnClick', event, pageNumber);
+
+          if (!attributes.pageLink) return false;
+        });
+
+        // Last button click listener
+        el.on('click', '.J-paginationjs-last', function(event) {
+          var current = $(event.currentTarget);
+          var pageNumber = current.attr('data-num').trim();
+
+          if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
+
+          if (self.callHook('beforeLastOnClick', event, pageNumber) === false) return false;
+
+          self.go(pageNumber);
+
+          self.callHook('afterLastOnClick', event, pageNumber);
+
+          if (!attributes.pageLink) return false;
+        });
+
         // Go button click listener
         el.on('click', '.J-paginationjs-go-button', function(event) {
           var pageNumber = $('.J-paginationjs-go-pagenumber', el).val();
@@ -833,6 +881,16 @@
           self.next(done);
         });
 
+        // First page
+        container.on(eventPrefix + 'first', function(event, done) {
+          self.first(done);
+        });
+
+        // Last page
+        container.on(eventPrefix + 'last', function(event, done) {
+          self.last(done);
+        });
+
         // Disable
         container.on(eventPrefix + 'disable', function() {
           self.disable();
@@ -892,6 +950,8 @@
         switch (options) {
           case 'previous':
           case 'next':
+          case 'first':
+          case 'last':
           case 'go':
           case 'disable':
           case 'enable':
@@ -991,6 +1051,12 @@
     // 'Next' text
     nextText: '&rsaquo;',
 
+    // 'First' text
+    firstText: '&laquo;',
+
+    // 'Last' text
+    lastText: '&raquo;',
+
     // Ellipsis text
     ellipsisText: '...',
 
@@ -1149,7 +1215,7 @@
 
   // uninstall plugin
   function uninstallPlugin(target) {
-    var events = ['go', 'previous', 'next', 'disable', 'enable', 'refresh', 'show', 'hide', 'destroy'];
+    var events = ['go', 'previous', 'next', 'first', 'last', 'disable', 'enable', 'refresh', 'show', 'hide', 'destroy'];
 
     // off all events
     $.each(events, function(index, value) {
diff --git a/public/scripts/utils.js b/public/scripts/utils.js
index 780481b2f..3d42c2345 100644
--- a/public/scripts/utils.js
+++ b/public/scripts/utils.js
@@ -25,6 +25,8 @@ export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= tot
 export const localizePagination = function(container) {
     container.find('[title="Next page"]').attr('title', t`Next page`);
     container.find('[title="Previous page"]').attr('title', t`Previous page`);
+    container.find('[title="First page"]').attr('title', t`First page`);
+    container.find('[title="Last page"]').attr('title', t`Last page`);
 };
 
 /**
diff --git a/public/style.css b/public/style.css
index 1e2ba28ad..8b8ab8328 100644
--- a/public/style.css
+++ b/public/style.css
@@ -5741,7 +5741,8 @@ body:not(.movingUI) .drawer-content.maximized {
 }
 
 .paginationjs-pages ul li a {
-    padding: 0.05em 0.5em;
+    padding: 0.25em;
+    font-family: 'Font Awesome 6 Free';
     text-decoration: none;
     color: var(--SmartThemeBodyColor);
     border: 1px solid var(--SmartThemeBorderColor);