How to write pagination in JavaScript?

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();
Post Views: 16
Scroll to Top