pagination-web

async function fetchData() {
    try {
        const response = await fetch('http://localhost:5000/data');
        if (!response.ok) {
            console.log(err.message || err);
        }
        const data = await response.json();

        generatePagination(data.length, 50);

    } catch (err) {
        console.log(err.message || err);
    }
}

fetchData();

function generatePagination(totalItems, itemsPerPage) {
    const paginationContainer = document.querySelector('.container-page');
    const currentPage = getCurrentPage();
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    for (let i = 0; i < totalPages; i++) {
        const startRange = i * itemsPerPage + 1;
        const endRange = Math.min((i + 1) * itemsPerPage);

        const pipe = document.createElement('b');
        pipe.textContent = ' | ';
        pipe.style.fontSize = '25px';

        const link = document.createElement('a');
        link.className = 'pages';
        link.style.textDecoration = 'none';
        link.style.fontSize = '25px';
        link.href = `http://localhost:5000/?page=${i + 1}&from=${startRange}&to=${(i + 1) * itemsPerPage}`;
        link.textContent = `${startRange}-${endRange}`;
        if (i + 1 === currentPage) {
            link.style.fontWeight = 'bold';
            // link.style.fontColor = 'ligtblue';
        }
        paginationContainer.appendChild(pipe);
        paginationContainer.appendChild(link);
        paginationContainer.appendChild(pipe);
    }
}

function getCurrentPage() {
    const urlParams = new URLSearchParams(window.location.search);
    const currentPage = parseInt(urlParams.get('page')) || 1;
    return currentPage;
}