PAGINATOR

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Pagination with Inline Styles</title>
</head>
<body>

    <div id="root"></div>

    <script>
        const chunkSize = 100;  // Number of items per chunk
        const totalItems = 1000;  // Total number of items
        const totalPages = Math.ceil(totalItems / chunkSize);  // Total number of pages
        let currentPage = 1;

        // Function to create pagination dynamically
        function createPagination() {
            const root = document.getElementById('root');
            root.innerHTML = '';  // Clear any previous content

            // Create pagination container div
            const paginationContainer = document.createElement('div');
                paginationContainer.style.display = 'flex';
                paginationContainer.style.justifyContent = 'center';
                paginationContainer.style.alignItems = 'center';
                paginationContainer.style.marginTop = '20px';

            // Create Previous button
            const prevButton = document.createElement('button');
                prevButton.textContent = 'Previous';
                prevButton.style.margin = '0 5px';
                prevButton.style.padding = '5px 10px';
                prevButton.style.cursor = 'pointer';
                prevButton.addEventListener('click', prevPage);
            paginationContainer.appendChild(prevButton);

            // Create span for pagination numbers
            const paginationNumbers = document.createElement('span');
            paginationContainer.appendChild(paginationNumbers);

            // Create Next button
            const nextButton = document.createElement('button');
                nextButton.textContent = 'Next';
                nextButton.style.margin = '0 5px';
                nextButton.style.padding = '5px 10px';
                nextButton.style.cursor...