datatables/components/pagination/Pagination.js

import Buttons  from "./Buttons";
import Label from "./Label";
import Serch from "./Search";

export default class Pagination {
    constructor(onPageChange, rowCount, perPage) {
        this.currentPage = 1;
        this.maxButtons = 10;
        this.onPageChange = onPageChange;
        this.rowCount = rowCount;
        this.perPage = perPage;
        this.totalPages = Math.ceil(rowCount / perPage);
    }

    render() {
        this.paginationContainer = document.createElement('div');
        this.paginationContainer.classList.add('pagination', 'row');

        if(this.totalPages <= 1){
            return this.paginationContainer;
        }

        this.labels = new Label(this.currentPage, this.totalPages, 10, 1000);

        this.buttons = new Buttons(this.currentPage, this.totalPages, 10, this.onPageChange, (page) => {
            this.labels.updateLabel(page, this.perPage);
            this.search.updateSearch(page, this.perPage);
        });

        this.search = new Serch(this.currentPage, this.totalPages, this.onPageChange, (page, size) => {
            this.labels.updateLabel(page, this.perPage);
            this.buttons.updateButtons(page, this.perPage);
            this.search.updateSearch(page, this.perPage);
        });

        this.paginationContainer.appendChild(this.labels.render());
        this.paginationContainer.appendChild(this.buttons.render());
        this.paginationContainer.appendChild(this.search.render());

        return this.paginationContainer;
    }

    changePageSize(onPageChange, rowCount, perPage) {
        this.currentPage = 1;
        this.maxButtons = 10;
        this.onPageChange = onPageChange;
        this.rowCount = rowCount;
        this.perPage = perPage;
        this.totalPages = Math.ceil(rowCount / perPage);

        return this.paginationContainer;
    }

}