Paginated Table

<!DOCTYPE html>
<title>My Example</title>

<table class="paginated-table" id="myPaginatedTable">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Location</th>
        </tr>
    </thead>
    <tbody>
        
        <tr><td>1</td><td>City Park</td><td>Downtown</td></tr>
        <tr><td>2</td><td>Oakwood Nature Preserve</td><td>North Suburbs</td></tr>
        <tr><td>3</td><td>Riverside Walkway</td><td>River District</td></tr>
        <tr><td>4</td><td>Maple Hill</td><td>Uptown</td></tr>
        <tr><td>5</td><td>Lakeside Trail</td><td>West End</td></tr>
        <tr><td>6</td><td>Green Valley</td><td>East End</td></tr>
        <tr><td>7</td><td>Pine Ridge Forest</td><td>North Suburbs</td></tr>
        <tr><td>8</td><td>Historic Downtown Square</td><td>Downtown</td></tr>
        <tr><td>9</td><td>West End Gardens</td><td>West End</td></tr>
        <tr><td>10</td><td>Central Station Plaza</td><td>Downtown</td></tr>
        <tr><td>11</td><td>Hilltop Lookout</td><td>Uptown</td></tr>
        <tr><td>12</td><td>River Bend Park</td><td>River District</td></tr>
    </tbody>
</table>

<div class="pagination-container" id="paginationControls"></div>

const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const totalPages = Math.ceil(rows.length / rowsPerPage);
    let currentPage = 1;
    
    const paginationControls = document.getElementById('paginationControls');

function displayPage(page) {
        currentPage = page;
        // Hide all rows
        rows.forEach(row => row.style.display = 'none');
        
        // Calculate which rows to show
        const startIndex = (page - 1) * rowsPerPage;
        const endIndex = startIndex + rowsPerPage;
        const pageRows = rows.slice(startIndex, endIndex);

// Show the rows for the current page
        pageRows.forEach(row => row.style.display = '');
        
        renderControls();
    }
    
    function renderControls() {
        paginationControls.innerHTML = '';
        
        // Previous Button
        const prevButton = document.createElement('button');
        prevButton.innerHTML = '&laquo; Prev';
        prevButton.disabled = currentPage === 1;
        prevButton.addEventListener('click', () => displayPage(currentPage - 1));
        paginationControls.appendChild(prevButton);

// Page Number Buttons
        for (let i = 1; i <= totalPages; i++) {
            const pageButton = document.createElement('button');
            pageButton.innerText = i;
            if (i === currentPage) {
                pageButton.classList.add('active');
            }
            pageButton.addEventListener('click', () => displayPage(i));
            paginationControls.appendChild(pageButton);
        }
        
        // Next Button
        const nextButton = document.createElement('button');
        nextButton.innerHTML = 'Next &raquo;';
        nextButton.disabled = currentPage === totalPages;
        nextButton.addEventListener('click', () => displayPage(currentPage + 1));
        paginationControls.appendChild(nextButton);
    }
    
    // Initial display
    displayPage(1);
}

// Initialize the paginator for the table with an ID 'myPaginatedTable'
// Show 5 rows per page
paginateTable('myPaginatedTable', 5);

</script>