diff --git a/src/registrar/assets/js/get-gov.js b/src/registrar/assets/js/get-gov.js
index 26af3298f..448d3ee70 100644
--- a/src/registrar/assets/js/get-gov.js
+++ b/src/registrar/assets/js/get-gov.js
@@ -1196,10 +1196,28 @@ class BaseTable {
counterSelectorEl.innerHTML = `${totalItems} ${this.itemName}${totalItems > 1 ? 's' : ''}${this.currentSearchTerm ? ' for ' + '"' + this.currentSearchTerm + '"' : ''}`;
+ // Helper function to create a pagination item, such as a
+ const createPaginationItem = (page) => {
+ const paginationItem = document.createElement('li');
+ paginationItem.className = 'usa-pagination__item usa-pagination__page-no';
+ paginationItem.innerHTML = `
+
+ `;
+ if (page === currentPage) {
+ paginationItem.querySelector('a').classList.add('usa-current');
+ paginationItem.querySelector('a').setAttribute('aria-current', 'page');
+ }
+ paginationItem.querySelector('a').addEventListener('click', (event) => {
+ event.preventDefault();
+ this.loadTable(page);
+ });
+ return paginationItem;
+ };
+
if (hasPrevious) {
- const prevPageItem = document.createElement('li');
- prevPageItem.className = 'usa-pagination__item usa-pagination__arrow';
- prevPageItem.innerHTML = `
+ const prevPaginationItem = document.createElement('li');
+ prevPaginationItem.className = 'usa-pagination__item usa-pagination__arrow';
+ prevPaginationItem.innerHTML = `
`;
- prevPageItem.querySelector('a').addEventListener('click', (event) => {
+ prevPaginationItem.querySelector('a').addEventListener('click', (event) => {
event.preventDefault();
this.loadTable(currentPage - 1);
});
- paginationButtons.appendChild(prevPageItem);
+ paginationButtons.appendChild(prevPaginationItem);
}
// Add first page and ellipsis if necessary
if (currentPage > 2) {
- paginationButtons.appendChild(this.createPageItem(1, parentTableSelector, currentPage));
+ paginationButtons.appendChild(createPaginationItem(1));
if (currentPage > 3) {
const ellipsis = document.createElement('li');
ellipsis.className = 'usa-pagination__item usa-pagination__overflow';
@@ -1228,7 +1246,7 @@ class BaseTable {
// Add pages around the current page
for (let i = Math.max(1, currentPage - 1); i <= Math.min(numPages, currentPage + 1); i++) {
- paginationButtons.appendChild(this.createPageItem(i, parentTableSelector, currentPage));
+ paginationButtons.appendChild(createPaginationItem(i));
}
// Add last page and ellipsis if necessary
@@ -1240,13 +1258,13 @@ class BaseTable {
ellipsis.innerHTML = '…';
paginationButtons.appendChild(ellipsis);
}
- paginationButtons.appendChild(this.createPageItem(numPages, parentTableSelector, currentPage));
+ paginationButtons.appendChild(createPaginationItem(numPages));
}
if (hasNext) {
- const nextPageItem = document.createElement('li');
- nextPageItem.className = 'usa-pagination__item usa-pagination__arrow';
- nextPageItem.innerHTML = `
+ const nextPaginationItem = document.createElement('li');
+ nextPaginationItem.className = 'usa-pagination__item usa-pagination__arrow';
+ nextPaginationItem.innerHTML = `
`;
- nextPageItem.querySelector('a').addEventListener('click', (event) => {
+ nextPaginationItem.querySelector('a').addEventListener('click', (event) => {
event.preventDefault();
this.loadTable(currentPage + 1);
});
- paginationButtons.appendChild(nextPageItem);
+ paginationButtons.appendChild(nextPaginationItem);
}
}
@@ -1288,24 +1306,6 @@ class BaseTable {
}
};
- // Helper function to create a page item
- createPageItem(page, parentTableSelector, currentPage) {
- const pageItem = document.createElement('li');
- pageItem.className = 'usa-pagination__item usa-pagination__page-no';
- pageItem.innerHTML = `
-
- `;
- if (page === currentPage) {
- pageItem.querySelector('a').classList.add('usa-current');
- pageItem.querySelector('a').setAttribute('aria-current', 'page');
- }
- pageItem.querySelector('a').addEventListener('click', (event) => {
- event.preventDefault();
- this.loadTable(page);
- });
- return pageItem;
- }
-
/**
* A helper that resets sortable table headers
*