Question:
I tried to write a pagination in JavaScript, as a result I got confused in the logic, and specifically in the output of pages, I need to display a link to the first page, to the last one and two pages next to the one I am currently on. Even if I display these pages, then I have no idea how to link links to pages with the pages themselves
function Pagination(pagination) {
var posts = document.querySelectorAll(pagination.posts);
var maxPostsOnPage = pagination.maxPostsQualitity;
var classOfPaginationNum = pagination.classOfPaginationNum;
var paginationContainer = document.querySelector(pagination.containerOfPagination);
function countPages() {
var pagesCount = Math.ceil(posts.length / maxPostsOnPage);
return pagesCount;
};
function appendPagesNum(numPages) {
function addPageNum(number) {
paginationContainer.innerHTML += '<a href="#" class=" ' + classOfPaginationNum + ' "> ' + number + '</a>';
}
if (numPages > 4) {
addPageNum(1);
addPageNum(1);
} else {
for(var i = 0; i < numPages; i++) {
addPageNum(i);
}
}
};
appendPagesNum(countPages());
}
var pag1 = new Pagination({
posts: '.post',
maxPostsQualitity: 3,
containerOfPagination: '.pagination',
classOfPaginationNum: 'pagination__links',
})
.post {
display: block;
width: 400px;
margin: 20px;
}
<div class="pagination">
</div>
<div class="post">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto officiis aliquam illum culpa est reiciendis non sint quasi ipsum neque, quas, voluptatum suscipit nam vero excepturi a hic sed aperiam.</div>
<div class="post">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem eos ducimus debitis assumenda, dolores nihil mollitia incidunt consequatur tempora inventore architecto nam reprehenderit consectetur aliquid voluptate autem repudiandae at dolor?</div>
<div class="post">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores esse velit consequuntur accusantium nulla odit inventore odio nemo voluptas, et explicabo error reiciendis eaque cumque, cum dicta at quisquam.</div>
<div class="post">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim aut dolore sint, dignissimos cum animi soluta voluptatum doloremque dicta accusantium quo maxime eaque. Omnis ipsa minima officiis, deleniti cupiditate obcaecati.</div>
<div class="post">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem exercitationem ipsam unde voluptates nihil accusantium magni dicta culpa animi aperiam corrupti obcaecati consectetur, molestiae blanditiis vero ratione explicabo quibusdam! Aperiam.</div>
<div class="post">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ratione exercitationem, mollitia laborum error accusamus neque earum, molestiae dicta, ipsum magnam. Laborum dicta nesciunt cum debitis perferendis repellat corrupti exercitationem?</div>
<div class="post">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum error odit, porro ab fuga repellat soluta aliquid sit facere libero. Sed voluptatibus libero quaerat nisi, fuga dolorem sit fugit earum!</div>
Answer:
class Paginator {
constructor(current, all, parentElement) {
this.current = current;
this.all = all;
this.parentElement = parentElement;
if(this.current < 1 || this.current > this.all) {
throw `Ошибка пагинатора: (текущая страница ${this.current}, всего страниц ${this.all})`
}
}
render() {
if(this.all === 1) {
return;
}
const links = [1, this.all];
for(let i = this.current - 2; i <= this.current + 2; i++) {
if(i < 1 || i > this.all) {
continue
}
links.push(i);
}
const uniqLinks = [...new Set(links)];
uniqLinks.sort((a, b) => a-b);
for(let i = 0; i < uniqLinks.length; i++) {
this._renderLink(uniqLinks[i]);
if( (i+1) < uniqLinks.length && (uniqLinks[i] + 1 !== uniqLinks[i+1]) ) {
this.__renderDots()
}
}
}
_renderLink(pageNum) {
const a = document.createElement('a');
a.href = `/?page=${pageNum}`;
if(pageNum == this.current) {
a.classList.add('current')
}
this.parentElement.appendChild(a)
}
__renderDots() {
const span = document.createElement('span');
span.innerHTML = '...';
this.parentElement.appendChild(span)
}
}
const paginator = new Paginator(5, 20, document.querySelector('body'));
paginator.render();