Hi, I’m building out a resource area in Hubspot which has a large number of items being pulled from a HubDB.
The html for the code is:
<div class="resources-module-row row mt-4">
<div class="resources-module-column col-md-12">
<nav aria-label="Page navigation">
<ul class="resources-module-pagination pagination pagination_area" id="pagination_area">
</ul>
</nav>
</div>
</div>
The JS is:
function searchResources() {
var searchTerm = searchInput.value.trim().toLowerCase();
var contents = document.querySelectorAll('.content');
contents.forEach(function(content) {
var headlineElement = content.querySelector('.headline'); // Select the anchor tag directly
var descriptionElement = content.querySelector('.description_outer');
var headlineText = headlineElement.textContent.trim().toLowerCase();
var descriptionText = descriptionElement.textContent.trim().toLowerCase();
if (searchTerm === '') {
content.style.display = 'block';
removeHighlights(headlineElement);
removeHighlights(descriptionElement);
} else {
removeHighlights(headlineElement); // Clear existing highlights
removeHighlights(descriptionElement); // Clear existing highlights
if (headlineText.includes(searchTerm) || descriptionText.includes(searchTerm)) {
highlightText(headlineElement, searchTerm);
highlightText(descriptionElement, searchTerm);
content.style.display = 'block';
} else {
content.style.display = 'none';
}
}
});
updatePagination();
}
function updatePagination() {
var visibleContents = document.querySelectorAll('.content:not([style*="display: none"])');
var paginationArea = document.querySelector('.pagination_area');
var totalPages = Math.ceil(visibleContents.length / {{ module.style.contents.contents_to_display_at_a_time }});
var currentPage = 1;
paginationArea.innerHTML = '';
for (var i = 1; i <= totalPages; i++) {
var pageLink = document.createElement('a');
pageLink.href = '#';
pageLink.textContent = i;
pageLink.dataset.page = i;
pageLink.addEventListener('click', function(e) {
e.preventDefault();
var pageNum = parseInt(this.dataset.page);
currentPage = pageNum;
showPage(pageNum, visibleContents);
highlightActivePage(currentPage);
});
paginationArea.appendChild(pageLink);
}
var previousLink = document.createElement('a');
previousLink.href = '#';
previousLink.textContent = "{{ module.other_text.pagination_previous_button_text }}";
previousLink.addEventListener('click', function(e) {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
showPage(currentPage, visibleContents);
highlightActivePage(currentPage);
}
});
paginationArea.insertBefore(previousLink, paginationArea.firstChild);
var nextLink = document.createElement('a');
nextLink.href = '#';
nextLink.textContent = "{{ module.other_text.pagination_next_button_text }}";
nextLink.addEventListener('click', function(e) {
e.preventDefault();
if (currentPage < totalPages) {
currentPage++;
showPage(currentPage, visibleContents);
highlightActivePage(currentPage);
}
});
paginationArea.appendChild(nextLink);
showPage(1, visibleContents);
highlightActivePage(1);
}
function highlightActivePage(currentPageNum) {
var pageLinks = document.querySelectorAll('.pagination_area a');
pageLinks.forEach(function(link) {
var pageNum = parseInt(link.dataset.page);
if (pageNum === currentPageNum) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
Currently the pagination shows every page available:
I am trying to tweak the code so that it only shows the first 5 or 6 pages with a … button after the last page number to show that there are further pages (if there are any). With the previous button at one end and next button at the other.
Thanks
Tanks for including all your details. That is always helpful in giving our community members more details to work with.