datatables/components/pagination/Buttons.js

export default class Buttons {
    constructor(currentPage, totalPages, maxButtons, onPageChange, replicateChanges) {
        this.currentPage = currentPage;
        this.totalPages = totalPages;
        this.maxButtons = maxButtons;
        this.onPageChange = onPageChange;
        this.replicateChanges = replicateChanges;
    }

    render() {
        console.log('adssaddas');
        this.buttonHolder = document.createElement('div');
        this.buttonHolder.classList.add('col-12', 'col-md-9');

        this.paginationButtons = document.createElement('ul');
        this.paginationButtons.classList.add('pagination', 'pagination-sm');

        this.prevButton = document.createElement('li');
        this.prevButton.classList.add('page-link');
        this.prevButton.textContent = 'Previous';
        this.prevButton.disabled = true;
        this.prevButton.addEventListener('click', () => {
            if (this.currentPage > 1) {
                this.onPageChange(this.currentPage - 1);
                this.updateButtons(this.currentPage - 1);
                this.replicateChanges(this.currentPage);
            }
        });

        this.paginationButtons.appendChild(this.prevButton);
        this.pageButtons = Array();

        for (let i = 1; i <= this.totalPages; i++) {
            const pageButton = document.createElement('li');
            pageButton.classList.add('page-item');
            const pageButtonLink = document.createElement('a');
            pageButtonLink.classList.add('page-link');
            pageButtonLink.textContent = i;
            if (!(this.currentPage === i ||
                i > (this.currentPage + this.maxButtons / 2) ||
                i < (this.currentPage - this.maxButtons / 2))) {
                pageButton.classList.add('hidden')
            }
            if(this.currentPage === i){
                pageButton.classList.add('active')
            }
            pageButtonLink.addEventListener('click', () => {
                this.onPageChange(i);
                this.updateButtons(i);
                this.replicateChanges(this.currentPage);
            });
            pageButton.appendChild(pageButtonLink)
            this.pageButtons.push(pageButton);
            this.paginationButtons.appendChild(pageButton);
        }

        this.nextButton = document.createElement('li');
        this.nextButton.classList.add('page-link');
        this.nextButton.textContent = 'Next';
        this.nextButton.disabled = this.totalPages === 0 || this.currentPage === this.totalPages;
        this.nextButton.addEventListener('click', () => {
            if (this.currentPage < this.totalPages) {
                this.onPageChange(this.currentPage + 1);
                this.updateButtons(this.currentPage + 1);
                this.replicateChanges(this.currentPage);
            }
        });
        this.paginationButtons.appendChild(this.nextButton);
        this.buttonHolder.appendChild(this.paginationButtons);

        return this.buttonHolder;

    }

    updateButtons(page, perPage) {

        if (page) {
            this.currentPage = parseInt(page);
        }

        if (this.prevButton) {
            this.prevButton.disabled = this.currentPage === 1;
        }

        if (this.nextButton) {
            this.nextButton.disabled = this.totalPages === 0 || this.currentPage === this.totalPages;
        }

        if (this.pageButtons) {
            this.pageButtons.forEach((button, index) => {
                button.classList.remove('active');
                if (this.currentPage === index + 1 ||
                    index > (this.currentPage + this.maxButtons / 2) ||
                    index < (this.currentPage - this.maxButtons / 2)) {
                    button.classList.add('hidden');
                }else{
                    button.classList.remove('hidden');
                }
                if (index + 1 == this.currentPage) {
                    button.classList.add('active');
                    button.classList.remove('hidden');
                } else {
                    button.removeAttribute('value');
                }
            });
        }
    }
}