首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 如何限制显示在分页中的可见页面的数量

未定义分页限制.我希望以这种1/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 pageSize = 2;
        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);
                    });
                }
            });
        });
       .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 -->

推荐答案

要在函数appendPageNumber()中添加带有实际页码的总pageCount，请使用pageNumber.innerHTML=${index}\\${pageCount}(对于模板字符串，请注意反斜杠是一个转义字符，因此您需要用2个反斜杠转义反斜杠)，要禁用按钮，请使用所需条件的属性DISABLED(您可以在添加的DevTools DISABLED属性中判断它).您的handlePageButtonsStatus也在处理禁用状态.您还应该在setCurrentPage中设置这些条件，就像这样，当您单击页码时，如果您在第一页或最后一页，箭头按钮将被禁用

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 pageSize = 2;
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}\\${pageCount}`; //for adding total page number
    pageNumber.setAttribute("page-index", index);
    pageNumber.setAttribute("aria-label", "Page " + index);
    paginationNumbers.innerHTML=''
    paginationNumbers.appendChild(pageNumber);
};
    

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

const setCurrentPage = (pageNum) => {
    currentPage = pageNum;
    if(currentPage===1){prevButton.disabled = true} // disable button when currentPage equal first page by pressing page number
    if(currentPage===pageCount){nextButton.disabled = true}// disable button when cureentPage equal last page by pressing page number
    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);
        if(currentPage===1){prevButton.disabled = true}// disable button when cureentPage equal first page 
        getPaginationNumbers(currentPage);
    });

    nextButton.addEventListener("click", () => {
        setCurrentPage(currentPage + 1);
        if(currentPage===pageCount){nextButton.disabled = true}// disable button when cureentPage equal last page 
        getPaginationNumbers(currentPage);
    });

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

        if (pageIndex) {
            button.addEventListener("click", () => {
                setCurrentPage(pageIndex);
            });
        }
    });
});
.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>

Javascript相关问答推荐

React Native平面列表自动滚动

TypScript界面中的Infer React子props

vscode扩展-webView Panel按钮不起任何作用

被CSS优先级所迷惑

拖放仅通过 Select 上传

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状？

InDesign—创建一个独立的窗口，在文档中进行更正时保持打开状态

如何找出摆线表面上y与x相交的地方？

在网页上添加谷歌亵渎词

如何将未排序的元素追加到数组的末尾？

OpenAI转录API错误请求

如何利用CSS中的隐藏元素实现平滑扩展和防止网格行间隙

如果没有页面重新加载Angular ，innerHTML属性绑定不会更新

如何访问此数组中的值？

Pevent触发material 用户界面数据网格中的自动保存

使用createBrowserRoutVS BrowserRouter的Reaction路由

谷歌饼图3D切片

是否有静态版本的`instanceof`？

AstroJS混合模式服务器终结点返回404

与find()方法一起使用时，Mongoose中的$or运算符没有提供所有必需的数据

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630