如何用JavaScript显示1/4之类的分页

Question

我想以 1/4 的格式显示分页，并且下一个和上一个按钮应该相应地工作。我要求这样的东西；您可以看到它显示分页的方式“https://jsfiddle.net/x9b2Lqm5/4/”。此外，在第一页和最后一页上，应禁用点击。您可以在表格底部看到它。请帮助我完成此任务。我尝试过但做不到。这就是我寻求专家帮助的原因。

       const paginationNumbers = document.getElementById("pagination-numbers");
        const paginatedList = document.getElementById("paginated-list");
        const listItems = paginatedList.querySelectorAll("tbody tr");
        const nextButton = document.getElementById("next-button");
        const prevButton = document.getElementById("prev-button");

        const paginationLimit = 2;
        const pageCount = Math.ceil(listItems.length / paginationLimit);
        let currentPage = 1;

        const disableButton = (button) => {
            button.classList.add("disabled");
            button.setAttribute("disabled", true);
        };

        const enableButton = (button) => {
            button.classList.remove("disabled");
            button.removeAttribute("disabled");
        };

        const handlePageButtonsStatus = () => {
            if (currentPage === 1) {
                disableButton(prevButton);
            } else {
                enableButton(prevButton);
            }

            if (pageCount === currentPage) {
                disableButton(nextButton);
            } else {
                enableButton(nextButton);
            }
        };

        const handleActivePageNumber = () => {
            document.querySelectorAll(".pagination-number").forEach((button) => {
                button.classList.remove("active");
                const pageIndex = Number(button.getAttribute("page-index"));
                if (pageIndex == currentPage) {
                    button.classList.add("active");
                }
            });
        };

        const appendPageNumber = (index) => {
            const pageNumber = document.createElement("button");
            pageNumber.className = "pagination-number";
            pageNumber.innerHTML = index;
            pageNumber.setAttribute("page-index", index);
            pageNumber.setAttribute("aria-label", "Page " + index);

            paginationNumbers.appendChild(pageNumber);
        };

        const getPaginationNumbers = () => {
            for (let i = 1; i <= pageCount; i++) {
                appendPageNumber(i);
            }
        };

        const setCurrentPage = (pageNum) => {
            currentPage = pageNum;

            handleActivePageNumber();
            handlePageButtonsStatus();

            const prevRange = (pageNum - 1) * paginationLimit;
            const currRange = pageNum * paginationLimit;

            listItems.forEach((item, index) => {
                item.classList.add("hidden");
                if (index >= prevRange && index < currRange) {
                    item.classList.remove("hidden");
                }
            });
        };

        window.addEventListener("load", () => {
            getPaginationNumbers();
            setCurrentPage(1);

            prevButton.addEventListener("click", () => {
                setCurrentPage(currentPage - 1);
            });

            nextButton.addEventListener("click", () => {
                setCurrentPage(currentPage + 1);
            });

            document.querySelectorAll(".pagination-number").forEach((button) => {
                const pageIndex = Number(button.getAttribute("page-index"));

                if (pageIndex) {
                    button.addEventListener("click", () => {
                        setCurrentPage(pageIndex);
                    });
                }
            });
        });
    </script>

       .result {
        text-align: center;
        padding-bottom: 20px;
        width: 100%;
    }
    
    
    

 /* Responsive Table Start */
    
    .rstable {
        width: 100%;
        margin: 0 auto;
        padding: 16px 0px;
    }
    
    .rstable table {
        font-family: calibri, sans-serif;
        border-collapse: collapse;
        font-size: 16px;
        width: 100%;
        font-weight: 400;
    }
    
    .rstable tr {
        border-bottom: 1px solid #ccc;
    }
    
    .rstable tr td {
        text-align: left;
        padding: 9px;
        color: #333;
    }
    
    .rstable th {
        text-align: left;
        padding: 10px 9px;
        background: #004287;
        color: #fff;
        font-weight: 500;
    }
    
    .rstable tr:nth-child(even) {
        background: #f9fbfdc4;
    }
    
    .rstable tr:nth-child(odd) {
        background: #dae9f3;
    }
    
    .rstable tr td a {
        color: #004287;
        font-size: 16px;
    }
    
    @media (min-width: 768px) and (max-width: 1023px) {
        .rstable table {
            font-size: 15px;
        }
    }
    
    @media screen and (max-width: 767px) {
        .rstable table {
            font-size: 16px;
            font-weight: 400;
        }
        .rstable thead {
            display: none;
        }
        .rstable td:first-child {
            text-align: left;
            display: inline-grid;
            width: 90%;
        }
        .rstable td {
            text-align: left;
            display: inline-grid;
            width: 26%;
            vertical-align: top;
            color: #333;
            font-weight: 400;
        }
        .rstable td:before {
            content: attr(data-title);
            font-weight: 500;
            padding-bottom: 5px;
            font-size: 16px;
            color: #000;
        }
    }
    
    @media (min-width: 280px) and (max-width: 319px) {
        .rstable td {
            width: 23%;
        }
    }
    /* Responsive Table Ends */ 

   .arrow-right,
        .arrow-left {
            display: block;
            margin: 10px auto;
            width: 8px;
            height: 8px;
            border-top: 2px solid #000;
            border-left: 2px solid #000;
        }
        
        .arrow-right {
            transform: rotate(135deg);
        }
        
        .arrow-left {
            transform: rotate(-45deg);
        }
        
        .hidden {
            display: none;
        }
        
        .pagination-container {
            width: calc(100% - 0rem);
            display: flex;
            align-items: center;
            position: relative;
            bottom: 0;
            padding: 0rem 0;
            justify-content: right;
            /* text-align: center; */
        }
        
.pagination-number, .pagination-button {
    font-family: calibri, sans-serif;
    font-size: 16px;
    background-color: transparent;
    border: none;
    margin: 0.1rem 0.1rem;
    cursor: pointer;
    height: 2rem;
    width: 2rem;
    border-radius: 0.2rem;
}
        
        .pagination-number:hover,
        .pagination-button:not(.disabled):hover {
            background: #fff;
        }
        
        .pagination-number.active {
            color: #fff;
            background: #0085b6;
        }

                                 <!-- Result Start -->
                    

                    
                    <!-- Result Table Starts -->
                        <div class="rstable">
                        <table id="paginated-list">
                            <thead>
                                <tr>
                                    <th>Train</th>
                                    <th>Type</th>
                                    <th>Zone</th>
                                    <th>From</th>
                                    <th>Dep</th>
                                    <th>To</th>
                                    <th>Arr</th>
                                    <th>Dur</th>
                                    <th>Halts</th>
                                    <th>Runs On</th>
                                    <th>Dist</th>
                                    <th>Speed</th>
                                    <th>Classes</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-title="Train">15011 Kashi Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">97 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15012 Pushpak Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">96 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15013 Godan Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">95 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15014 Golden Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">94 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15015 Lucknow Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">93 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15016 SLN Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">92 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15017 Sitapur Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">91 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>
                                <tr>
                                    <td data-title="Train">15018 Darbhanga Express</td>
                                    <td data-title="Type">SuperFast</td>
                                    <td data-title="Zone">CR</td>
                                    <td data-title="From">LTT</td>
                                    <td data-title="Dep">15:30</td>
                                    <td data-title="To">GKP</td>
                                    <td data-title="Arr">06:15 +1 night</td>
                                    <td data-title="Dur">7h 55m</td>
                                    <td data-title="Halts">11</td>
                                    <td data-title="Runs On">S - T - T F -</td>
                                    <td data-title="Dist">632 km</td>
                                    <td data-title="Speed">90 km/hr</td>
                                    <td data-title="Classes">SL | 3A | 2A</td>
                                </tr>

                            </tbody>
                        </table>

                    </div>
                    
                    <div style="width: 100%; display: flex;align-items: center;">

                        <div class="pagination-container">
                            <button class="pagination-button" id="prev-button" aria-label="Previous page" title="Previous page">
                            <span class="arrow-left"></span>
                    </button>
                            <div id="pagination-numbers">
                            </div>
                            <button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
                            <span class="arrow-right"></span>
                        </button>

                        </div>
                    </div>
                    <!-- Result Table Ends -->
                    
                           <!-- Script Starts -->

Answer 1

你在期待什么？当您检查按钮时，按钮已成功禁用，您可能忘记设置它们的样式，并且活动按钮工作得很好，您能详细描述一下问题吗？