In a commercial website I am making, I have been trying to test out the pagination buttons. But the problem is that for some reason the script that I applied to my index.html isn’t working. I am following along a youtube video and planned to work my way through that, but I encountered the following issues:
1 – When I delete code from my script.js, any code actually, it causes my pagination buttons to disappear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech2etc Ecommerce Tutorial</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="pagination.css">
</head>
<body>
<!-- Pagination Buttons -->
<div class="pagination-buttons">
<button type="button" class="page-btn prev-page">prev</button>
<button type="button" class="page-btn start-page">start</button>
<button type="button" class="page-btn active">1</button>
<button type="button" class="page-btn">2</button>
<button type="button" class="page-btn">3</button>
<button type="button" class="page-btn">4</button>
<button type="button" class="page-btn">5</button>
<button type="button" class="page-btn">6</button>
<button type="button" class="page-btn">7</button>
<button type="button" class="page-btn">8</button>
<button type="button" class="page-btn">9</button>
<button type="button" class="page-btn next-page">next</button>
<button type="button" class="page-btn end-page">end</button>
</div>
<script src="script.js" defer> </script>
</body>
</html>
html,
body {
width: 100%;
height: 100%;
margin: 0;
font-family: sans-serif;
padding: 25px;
background: #fff;
color: #111;
display: flex;
justify-content: center;
align-items: center;
}
*, *::after, *::before {
box-sizing: border-box;
}
button {
background: none;
appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
border: none;
cursor: pointer;
}
.page-btn {
background: #ddd;
color: #2c303a;
height: 35px;
border-radius: 2px;
padding: 0 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
transition: background 0.3s ease;
margin: 0 2px
}
.page-btn:first-of-type {
margin-left: 0;
}
.page-btn:last-of-type {
margin-right: 0;
}
.page-btn:not([class$="-page"]) {
width: 35px;
}
.pagination-buttons {
display: flex;
align-items: center;
}
.page-btn[class*="-page"] {
background: #ccc;
font-size: 0.6em;
font-weight: 700;
}
.page-btn.active {
background: #717790;
color: #fff;
}
.page-btn[disabled] {
opacity: 0.3;
}
2 – I also don’t understand just how using this code: would give me an extra pagination button since I don’t really see any code that connects to the index.html containing that pagination container.
The closest seems to be this however this just creates an element, not retrieve it:
const paginationButtonContainer = document.createElement('div');
paginationButtonContainer.className = 'pagination-buttons';
const pageNumbers = (total, max, current) => {
const half = Math.floor(max / 2);
let to = max;
if(current + half >= total) {
to = total;
} else if(current > half) {
to = current + half ;
}
let from = Math.max(to - max, 0);
return Array.from({length: Math.min(total, max)}, (_, i) => (i + 1) + from);
}
function PaginationButton(totalPages, maxPagesVisible = 10, currentPage = 1) {
let pages = pageNumbers(totalPages, maxPagesVisible, currentPage);
let currentPageBtn = null;
const buttons = new Map();
const disabled = {
start: () => pages[0] === 1,
prev: () => currentPage === 1 || currentPage > totalPages,
end: () => pages.slice(-1)[0] === totalPages,
next: () => currentPage >= totalPages
}
const frag = document.createDocumentFragment();
const paginationButtonContainer = document.createElement('div');
paginationButtonContainer.className = 'pagination-buttons';
const createAndSetupButton = (label = '', cls = '', disabled = false, handleClick) => {
const buttonElement = document.createElement('button');
buttonElement.textContent = label;
buttonElement.className = `page-btn ${cls}`;
buttonElement.disabled = disabled;
buttonElement.addEventListener('click', e => {
handleClick(e);
this.update();
paginationButtonContainer.value = currentPage;
paginationButtonContainer.dispatchEvent(new CustomEvent('change', {detail: {currentPageBtn}}));
});
return buttonElement;
}
const onPageButtonClick = e => currentPage = Number(e.currentTarget.textContent);
const onPageButtonUpdate = index => (btn) => {
btn.textContent = pages[index];
if(pages[index] === currentPage) {
currentPageBtn.classList.remove('active');
btn.classList.add('active');
currentPageBtn = btn;
currentPageBtn.focus();
}
};
buttons.set(
createAndSetupButton('start', 'start-page', disabled.start(), () => currentPage = 1),
(btn) => btn.disabled = disabled.start()
)
buttons.set(
createAndSetupButton('prev', 'prev-page', disabled.prev(), () => currentPage -= 1),
(btn) => btn.disabled = disabled.prev()
)
pages.map((pageNumber, index) => {
const isCurrentPage = currentPage === pageNumber;
const button = createAndSetupButton(
pageNumber, isCurrentPage ? 'active' : '', false, onPageButtonClick
);
if(isCurrentPage) {
currentPageBtn = button;
}
buttons.set(button, onPageButtonUpdate(index));
});
buttons.set(
createAndSetupButton('next', 'next-page', disabled.next(), () => currentPage += 1),
(btn) => btn.disabled = disabled.next()
)
buttons.set(
createAndSetupButton('end', 'end-page', disabled.end(), () => currentPage = totalPages),
(btn) => btn.disabled = disabled.end()
)
buttons.forEach((_, btn) => frag.appendChild(btn));
paginationButtonContainer.appendChild(frag);
this.render = (container = document.body) => {
container.appendChild(paginationButtonContainer);
}
this.update = (newPageNumber = currentPage) => {
currentPage = newPageNumber;
pages = pageNumbers(totalPages, maxPagesVisible, currentPage);
buttons.forEach((updateButton, btn) => updateButton(btn));
}
this.onChange = (handler) => {
paginationButtonContainer.addEventListener('change', handler);
}
}
const paginationButtons = new PaginationButton(10, 5);
paginationButtons.render();
paginationButtons.onChange(e => {
console.log('-- changed', e.target.value)
});
I tried commenting out blocks of code from the start of the script in order to figure out how the pagination button worked. I have been unable to do that however since any code that I deleted caused the buttons to keep on disappearing from my web page.