datatables/components/pagination/Search.js

export default class Search {

    constructor(currentPage, totalPages, onPageChange, replicateChanges){
        this.currentPage = currentPage;
        this.totalPages = totalPages;
        this.onPageChange = onPageChange;
        this.replicateChanges = replicateChanges;
    }

    render(){

        const paginationHolder = document.createElement('div');
        paginationHolder.classList.add('col-12', 'col-md-3');

        this.paginationSearch = document.createElement('div');
        this.paginationSearch.classList.add('search', 'input-group','col-md-3', 'col-sm-12');

        this.textualNumber = document.createElement('input');
        this.textualNumber.classList.add('form-control', 'form-control-sm');
        this.textualNumber.setAttribute('type', 'number');
        this.textualNumber.setAttribute('min', 1);
        this.textualNumber.setAttribute('max', this.totalPages);
        this.textualNumber.value = this.currentPage;

        this.textualNumber.addEventListener('blur', (event) => {
            let page = event.target.value;
            if(page > this.totalPages){
                page = this.totalPages;
                this.textualNumber.value = this.totalPages;
            }
            if(page < 1){
                page = 1;
                this.textualNumber.value = page;
            }
            this.replicateChanges(page);
            this.onPageChange(page);
        });
        this.textualNumber.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                console.log('reberberbrte');
            }
        });
        //this.paginationSearch.appendChild(this.textualNumber);
        this.append(this.textualNumber);

        this.selectNumber = document.createElement('select');
        this.selectNumber.classList.add('form-select', 'form-select-sm')
        for(let i = 1; i < this.totalPages; i++){
            const selectOption = document.createElement('option');
            selectOption.innerText = i;
            selectOption.setAttribute('value', i);
            this.selectNumber.appendChild(selectOption);
        }

        this.selectNumber.addEventListener('change', (event) => {
            this.replicateChanges(event.target.value);
            this.onPageChange(event.target.value);
        });

        //this.paginationSearch.appendChild(this.selectNumber);
        this.append(this.selectNumber);

        const recordsPerPage = document.createElement('select');
        recordsPerPage.classList.add('form-select', 'form-select-sm')
        for(let i = 1; i < 10; i++){
            const selectOption = document.createElement('option');
            selectOption.innerText = i * 25;
            selectOption.setAttribute('value', i * 25);
            recordsPerPage.appendChild(selectOption);
        }
        recordsPerPage.addEventListener('change', (event) => {
            //console.log(event.target.value)
            //this.replicateChanges(event.target.value);
        });
        //this.paginationSearch.appendChild(recordsPerPage);
        this.append(recordsPerPage)

        paginationHolder.appendChild(this.paginationSearch);

        return paginationHolder;

    }

    updateSearch(pageNumber, perPage) {
        this.selectNumber.value = pageNumber;
        this.textualNumber.value = pageNumber;
    }

    searchChange(){

    }

    append(element){
        let container = document.createElement('div');
        container.classList.add('col-4');
        container.appendChild(element);
        this.paginationSearch.appendChild(container);
    }

}