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>

0f49a059e3c4459820e0ced5d36ffedcd5be0190

André M Piva <55606913+andrempiva@users.noreply.github.com>

Signed
Parents: a3e47ce0a6e7b5b80ce660a03fa58557137299e6
3 files changed, +73 -4Showing whitespace changes
public/lib/pagination.js+69 -3
@@ -139,9 +139,9 @@
139139 return el;
140140 },
141141
142142 getPageLinkTag: function(indextext) {
143143 var pageLink = attributes.pageLink;
144144 return pageLink ? `<a href="${pageLink}">${indextext}</a>` : `<a>${indextext}</a>`;
145145 },
146146
147147 // Generate HTML for page numbers
@@ -233,6 +233,8 @@
233233
234234 var prevText = attributes.prevText;
235235 var nextText = attributes.nextText;
236+ var firstText = attributes.firstText;
237+ var lastText = attributes.lastText;
236238 var goButtonText = attributes.goButtonText;
237239
238240 var classPrefix = attributes.classPrefix;
@@ -240,6 +242,8 @@
240242 var ulClassName = attributes.ulClassName || '';
241243 var prevClassName = attributes.prevClassName || '';
242244 var nextClassName = attributes.nextClassName || '';
245+ var firstClassName = attributes.firstClassName || '';
246+ var lastClassName = attributes.lastClassName || '';
243247
244248 var html = '';
245249 var sizeSelect = `<select class="J-paginationjs-size-select">`;
@@ -295,9 +299,11 @@
295299 if (showPrevious) {
296300 if (currentPage <= 1) {
297301 if (!autoHidePrevious) {
302+ html += `<li class="${classPrefix}-first ${disableClassName} ${firstClassName}"><a>${firstText}</a></li>`;
298303 html += `<li class="${classPrefix}-prev ${disableClassName} ${prevClassName}"><a>${prevText}</a></li>`;
299304 }
300305 } else {
306+ html += `<li class="${classPrefix}-first J-paginationjs-first ${firstClassName}" data-num="1" title="First page">${getPageLinkTag(firstText)}</li>`;
301307 html += `<li class="${classPrefix}-prev J-paginationjs-previous ${prevClassName}" data-num="${currentPage - 1}" title="Previous page">${getPageLinkTag(prevText)}</li>`;
302308 }
303309 }
@@ -312,9 +318,11 @@
312318 if (currentPage >= totalPage) {
313319 if (!autoHideNext) {
314320 html += `<li class="${classPrefix}-next ${disableClassName} ${nextClassName}"><a>${nextText}</a></li>`;
321+ html += `<li class="${classPrefix}-last ${disableClassName} ${lastClassName}"><a>${lastText}</a></li>`;
315322 }
316323 } else {
317324 html += `<li class="${classPrefix}-next J-paginationjs-next ${nextClassName}" data-num="${currentPage + 1}" title="Next page">${getPageLinkTag(nextText)}</li>`;
325+ html += `<li class="${classPrefix}-last J-paginationjs-last ${lastClassName}" data-num="${totalPage}" title="Last page">${getPageLinkTag(lastText)}</li>`;
318326 }
319327 }
320328 html += `</ul></div>`;
@@ -542,6 +550,14 @@
542550 this.go(this.model.pageNumber + 1, callback);
543551 },
544552
553+ first: function(callback) {
554+ this.go(1, callback);
555+ },
556+
557+ last: function(callback) {
558+ this.go(this.model.totalPage, callback);
559+ },
560+
545561 disable: function() {
546562 var self = this;
547563 var source = self.isAsync ? 'async' : 'sync';
@@ -774,6 +790,38 @@
774790 if (!attributes.pageLink) return false;
775791 });
776792
793+ // First button click listener
794+ el.on('click', '.J-paginationjs-first', function(event) {
795+ var current = $(event.currentTarget);
796+ var pageNumber = current.attr('data-num').trim();
797+
798+ if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
799+
800+ if (self.callHook('beforeFirstOnClick', event, pageNumber) === false) return false;
801+
802+ self.go(pageNumber);
803+
804+ self.callHook('afterFirstOnClick', event, pageNumber);
805+
806+ if (!attributes.pageLink) return false;
807+ });
808+
809+ // Last button click listener
810+ el.on('click', '.J-paginationjs-last', function(event) {
811+ var current = $(event.currentTarget);
812+ var pageNumber = current.attr('data-num').trim();
813+
814+ if (!pageNumber || current.hasClass(attributes.disableClassName)) return;
815+
816+ if (self.callHook('beforeLastOnClick', event, pageNumber) === false) return false;
817+
818+ self.go(pageNumber);
819+
820+ self.callHook('afterLastOnClick', event, pageNumber);
821+
822+ if (!attributes.pageLink) return false;
823+ });
824+
777825 // Go button click listener
778826 el.on('click', '.J-paginationjs-go-button', function(event) {
779827 var pageNumber = $('.J-paginationjs-go-pagenumber', el).val();
@@ -833,6 +881,16 @@
833881 self.next(done);
834882 });
835883
884+ // First page
885+ container.on(eventPrefix + 'first', function(event, done) {
886+ self.first(done);
887+ });
888+
889+ // Last page
890+ container.on(eventPrefix + 'last', function(event, done) {
891+ self.last(done);
892+ });
893+
836894 // Disable
837895 container.on(eventPrefix + 'disable', function() {
838896 self.disable();
@@ -892,6 +950,8 @@
892950 switch (options) {
893951 case 'previous':
894952 case 'next':
953+ case 'first':
954+ case 'last':
895955 case 'go':
896956 case 'disable':
897957 case 'enable':
@@ -991,6 +1051,12 @@
9911051 // 'Next' text
9921052 nextText: '&rsaquo;',
9931053
1054+ // 'First' text
1055+ firstText: '&laquo;',
1056+
1057+ // 'Last' text
1058+ lastText: '&raquo;',
1059+
9941060 // Ellipsis text
9951061 ellipsisText: '...',
9961062
@@ -1149,7 +1215,7 @@
11491215
11501216 // uninstall plugin
11511217 function uninstallPlugin(target) {
11521218 var events = ['go', 'previous', 'next', 'first', 'last', 'disable', 'enable', 'refresh', 'show', 'hide', 'destroy'];
11531219
11541220 // off all events
11551221 $.each(events, function(index, value) {
public/scripts/utils.js+2 -0
@@ -25,6 +25,8 @@ export const PAGINATION_TEMPLATE = '<%= rangeStart %>-<%= rangeEnd %> .. <%= tot
2525export const localizePagination = function(container) {
2626 container.find('[title="Next page"]').attr('title', t`Next page`);
2727 container.find('[title="Previous page"]').attr('title', t`Previous page`);
28+ container.find('[title="First page"]').attr('title', t`First page`);
29+ container.find('[title="Last page"]').attr('title', t`Last page`);
2830};
2931
3032/**
public/style.css+2 -1
@@ -5741,7 +5741,8 @@ body:not(.movingUI) .drawer-content.maximized {
57415741}
57425742
57435743.paginationjs-pages ul li a {
57445744 padding: 0.05em 0.5em25em;
5745+ font-family: 'Font Awesome 6 Free';
57455746 text-decoration: none;
57465747 color: var(--SmartThemeBodyColor);
57475748 border: 1px solid var(--SmartThemeBorderColor);