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

Javascript 搜索功能不是在分页的每一页上进行搜索

我添加到我的HTML表中的搜索框只在表的当前页面上工作，而不在表的其他分页页面上工作.我希望它显示整个表中任何位置的搜索结果，并且它应该具有与表分页相同的分页限制.

我还想以这种格式在我的表格底部显示当前页行计数和总页行计数，它会随着表行的不同而不断变化，例如"Showing 1 to 2 of 8"，它应该也适用于搜索页面.你可以在页面底部看到它.如果专家能帮我解决这个问题，那就太好了.

function myFunction() {
  var input, filter, table, tr, td, i, txtValue, pagination;
  input = document.getElementById("myInput");
  filter = input.value.toLowerCase();
  table = document.getElementById("paginated-list");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {
    alltags = tr[i].getElementsByTagName("td");
    isFound = false;
    for (j = 0; j < alltags.length; j++) {
      td = alltags[j];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toLowerCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          j = alltags.length;
          isFound = true;
        }
      }
    }
    if (!isFound && tr[i].className !== "header") {
      tr[i].style.display = "none";
    }
  }

}


//Table Search Script Ends

// Table Pagination Script Starts 
const paginationNumbers = document.getElementById("pagination-numbers");
const pageCount_ele = document.getElementById("pageCount") // Handle the page values
const currentPage_ele = document.getElementById("currentPage")
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.disable = true;
};

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

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

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

const handleActivePageNumber = () => {

  currentPage_ele.innerText = currentPage

  enableButton(prevButton) // Assing them as clickable
  enableButton(nextButton)

  if (currentPage == pageCount) {
    disableButton(nextButton) // if last page disable next

  }
  if (currentPage == 1) {
    disableButton(prevButton) // if 1st disable prev
  }
};

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 = () => {

};

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);
  });
  pageCount_ele.innerText = pageCount
});
.result {
  text-align: center;
  padding-bottom: 20px;
  width: 100%;
}

.canel-trains-grids {
  float: left;
  width: 100%;
  margin-bottom: 20px;
}

.canel-trains-grids .left-cancel {
  float: left;
  width: 60%;
  margin-top: 10px;
}

.canel-trains-grids .left-cancel span {
  float: left;
  font-size: 16px;
  background: #34A853;
  color: #fff;
  font-weight: 400;
  padding: 8px 8px;
  border-radius: 3px;
  text-align: left;
  line-height: 1.5em;
  width: auto;
}

.canel-trains-grids .right-cancel {
  float: right;
  width: 30%;
  margin-top: 10px;
}

.canel-trains-grids .right-cancel label {
  float: left;
  vertical-align: middle;
  line-height: 39px;
  font-size: 16px;
  color: #000;
  font-weight: 400;
}

.canel-trains-grids .right-cancel input {
  width: 230px;
  height: 22px;
  border: 1px solid #dae9f3;
  border-radius: 5px;
  padding: 8px 8px 8px 16px;
  float: right;
}

.canel-trains-grids .right-cancel input:focus {
  outline: none;
}


/* 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: #0085b6;
  ;
  border: none;
  margin: 0.1rem 0.1rem;
  cursor: pointer;
  height: 2rem;
  width: 2rem;
  border-radius: 0.2rem;
}

.newpagination-numbers {
  font-family: calibri, sans-serif;
  font-size: 16px;
  background-color: #333;
  ;
  border: none;
  margin: 0.1rem 0.1rem;
  height: 2rem;
  width: 2rem;
  line-height: 2rem;
  border-radius: 0.2rem;
  color: #fff;
  text-align: center;
}

.newpagination-numbers:hover {
  background: #34A853;
}

.pagination-number:hover,
.pagination-button:not(.disabled):hover {
  color: #fff !important;
  background: #FBBC05;
}

button.disabled {
  background-color: #c82333;
  /*Make it whatever color you want*/
}

.disabled {
  color: #333 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

span.disabled {
  border-color: #333 !important;
}

.pagination-number.active {
  color: #fff;
  background: #0085b6;
}
<div class="result">
  <div class='canel-trains-grids'>
    <div class='left-cancel'><span>22 Tech Company Listed</span>
    </div>
    <div class='right-cancel'>
      <input type="text" id="myInput" onkeyup="myFunction()" placeholder='Enter Train Number'>
    </div>
  </div>
</div>
<!-- Result Table Starts -->
<div class="rstable">
  <table id="paginated-list">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>Joined</th>
        <th>Salary</th>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Browser</th>
        <th>Platform</th>
        <th>Engine</th>
        <th>Grade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="Name">Airi Satou</td>
        <td data-title="Position">Accountant</td>
        <td data-title="Office">No1</td>
        <td data-title="Extn.">1</td>
        <td data-title="Joined">Mar1</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">01</td>
        <td data-title="Country">Germany</td>
        <td data-title="Browser">Chrome1</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">97</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Angelica Ramos</td>
        <td data-title="Position">CEO</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">2</td>
        <td data-title="Joined">Mar2</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">02</td>
        <td data-title="Country">India</td>
        <td data-title="Browser">Chrome2</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">96</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Ashton Cox</td>
        <td data-title="Position">Technical Author</td>
        <td data-title="Office">Software Engineer</td>
        <td data-title="Extn.">3</td>
        <td data-title="Joined">Mar3</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">03</td>
        <td data-title="Country">Japan</td>
        <td data-title="Browser">Chrome3</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">95</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Bradley Greer</td>
        <td data-title="Position">Integration Specialist</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">4</td>
        <td data-title="Joined">Mar4</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">04</td>
        <td data-title="Country">UK</td>
        <td data-title="Browser">Chrome4</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">94</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Brenden Wagner</td>
        <td data-title="Position">Software Engineer</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">5</td>
        <td data-title="Joined">Mar</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">05</td>
        <td data-title="Country">USA</td>
        <td data-title="Browser">Chrome5</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">93</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Brielle Williamson</td>
        <td data-title="Position">Pre-Sales Support</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">6</td>
        <td data-title="Joined">Mar</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">06</td>
        <td data-title="Country">Canada</td>
        <td data-title="Browser">Chrome6</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">92</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Bruno Nash</td>
        <td data-title="Position">Sales Assistant</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">7</td>
        <td data-title="Joined">Mar</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">07</td>
        <td data-title="Country">Italy</td>
        <td data-title="Browser">Chrome7</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">91 </td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Caesar Vance</td>
        <td data-title="Position">Javascript Developer</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">8</td>
        <td data-title="Joined">Mar</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">08</td>
        <td data-title="Country">Mexico</td>
        <td data-title="Browser">Chrome8</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">90</td>
        <td data-title="Grade">A</td>
      </tr>

    </tbody>
  </table>
</div>

<div style="width: 100%; display: flex;align-items: center;">
  <div style="text-align: left; width: 50%;">
    <span id="currpagecount">Showing 1 to 2 of </span><span id="totalrowscount">8</span>
  </div>
  <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" class="newpagination-numbers">
      <span id="currentPage"></span>/<span id="pageCount"></span>
    </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 -->

推荐答案

//Table Search Script Ends

// Table Pagination Script Starts 

const paginationNumbers = document.getElementById("pagination-numbers");
const pageCount_ele = document.getElementById("pageCount") // Handle the page values
const currentPage_ele = document.getElementById("currentPage")
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 currentSearchOfTotal = document.getElementById('currpagecount')
const totalRowsCount = document.getElementById('totalrowscount')
const paginationLimit = 2;
const searchPaginationLimit = 2
const pageCount = Math.ceil(listItems.length / paginationLimit);
const input = document.getElementById("myInput");
let currentPage = 1;
let searching = false


let searchArray=[]
let searchPageCount
function myFunction() {
  searching = true
  var input, filter, table, tr, td, i, txtValue, pagination;
  input = document.getElementById("myInput");
  filter = input.value.toLowerCase();
  table = document.getElementById("paginated-list");
  tr = table.getElementsByTagName("tr");
  searchArray=[]
    for (i = 1; i < tr.length; i++) {
    alltags = tr[i].getElementsByTagName("td");
    isFound = false;
      for (j = 0; j < alltags.length; j++) {
        td = alltags[j];
          if (td) {
              txtValue = td.textContent || td.innerText;
              if (txtValue.toLowerCase().indexOf(filter) > -1) {
                  tr[i].style.display = "";
                  j = alltags.length;
                  isFound = true;
              }
        }
    }
    if(isFound){searchArray.push(tr[i])}
      if (!isFound && tr[i].className !== "header") {
        tr[i].style.display = "none";
      }
    }
  setCurrentSearchPage(1)
  pageCount_ele.innerText = Math.ceil(searchArray.length/searchPaginationLimit)
}

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

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

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

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

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

if (Math.ceil(searchArray.length/searchPaginationLimit || searchArray.length==0) === currentPage) {
  disableButton(nextButton);
} else {
  enableButton(nextButton);
}
};

const handleActivePageNumber = () => {

  currentPage_ele.innerText = currentPage

  enableButton(prevButton) // Assing them as clickable
  enableButton(nextButton)

  if (currentPage == pageCount){
    disableButton(nextButton) // if last page disable next
  }
  if (currentPage == 1){
    disableButton(prevButton) // if 1st disable prev
  }
};

const handleSearchActivePageNumber = () => {

  currentPage_ele.innerText = currentPage

  enableButton(prevButton) // Assing them as clickable
  enableButton(nextButton)
  console.log(Math.ceil(searchArray.length/searchPaginationLimit))
  if (currentPage == (Math.ceil(searchArray.length/searchPaginationLimit))){
    disableButton(nextButton) // if last page disable next
  }
  if (currentPage == 1){
    disableButton(prevButton) // if 1st disable prev
  }
};

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

  handleActivePageNumber();
  handlePageButtonsStatus();

  const prevRange = (pageNum - 1) * paginationLimit;
  const currRange = pageNum * paginationLimit;
  currentSearchOfTotal.innerHTML=`Showing ${currRange-1} to ${currRange} of `
  totalRowsCount.innerHTML = `${listItems.length}`

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

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

  handleSearchActivePageNumber();
  handleSearchPageButtonsStatus();

  const prevRange = (pageNum - 1) * searchPaginationLimit;
  const currRange = pageNum * searchPaginationLimit;
  currentSearchOfTotal.innerHTML=`Showing search results ${currRange-1} to ${searchArray.length>1 ? currRange : 1} of `
  totalRowsCount.innerHTML = `${searchArray.length}`
  searchArray.forEach((item, index) => {
    item.classList.add("hidden");
    if (index >= prevRange && index < currRange) {
      item.classList.remove("hidden");
    }
  });
};

window.addEventListener("load", () => {
  setCurrentPage(1);
  prevButton.addEventListener("click", () => {
    if(!searching){
      setCurrentPage(currentPage - 1)
      pageCount_ele.innerText = pageCount
    }
    else if(searching){
      setCurrentSearchPage(currentPage-1)
      pageCount_ele.innerText = Math.ceil(searchArray.length/searchPaginationLimit)
    }
  });

  nextButton.addEventListener("click", () => {
    if(!searching){
      setCurrentPage(currentPage + 1)
      pageCount_ele.innerText = pageCount
    }
    else{
      setCurrentSearchPage(currentPage+1)
      pageCount_ele.innerText = Math.ceil(searchArray.length/searchPaginationLimit)
    };
  });
  pageCount_ele.innerText = pageCount
});
.result {
    text-align: center;
    padding-bottom: 20px;
    width: 100%;
}

  .canel-trains-grids {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.canel-trains-grids .left-cancel {
    float: left;
    width: 60%;
    margin-top: 10px;
}

.canel-trains-grids .left-cancel span {
    float: left;
    font-size: 16px;
    background: #34A853;
    color: #fff;
    font-weight: 400;
    padding: 8px 8px;
    border-radius: 3px;
    text-align: left;
    line-height: 1.5em;
    width: auto;
}

.canel-trains-grids .right-cancel {
    float: right;
    width: 30%;
    margin-top: 10px;
}

.canel-trains-grids .right-cancel label {
    float: left;
    vertical-align: middle;
    line-height: 39px;
    font-size: 16px;
    color: #000;
    font-weight: 400;
}

.canel-trains-grids .right-cancel input {
    width: 230px;
    height: 22px;
    border: 1px solid #dae9f3;
    border-radius: 5px;
    padding: 8px 8px 8px 16px;
    float: right;
}

.canel-trains-grids .right-cancel input:focus {
    outline: none;
}


/* 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: #0085b6;;
    border: none;
    margin: 0.1rem 0.1rem;
    cursor: pointer;
    height: 2rem;
    width: 2rem;
    border-radius: 0.2rem;
}

.newpagination-numbers {
    font-family: calibri, sans-serif;
    font-size: 16px;
    background-color: #333;;
    border: none;
    margin: 0.1rem 0.1rem;
    height: 2rem;
    width: 2rem;
    line-height: 2rem;
    border-radius: 0.2rem;
    color: #fff;
    text-align: center;
}
.newpagination-numbers:hover {
background: #34A853;
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
    color: #fff !important;
    background: #FBBC05;
}

button.disabled {
background-color: #c82333; /*Make it whatever color you want*/
}


.disabled { 
    
    color: #333 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    
}

span.disabled {
    border-color: #333 !important;

}


.pagination-number.active {
    color: #fff;
    background: #0085b6;
}
  <div class="result">
    <div class='canel-trains-grids'>
        <div class='left-cancel'>
          <span>22 Rajdhani Express Trains Listed</span>
        </div>
        <div class='right-cancel'>
            <input type="text" id="myInput" onkeyup="myFunction()" placeholder='Enter Train Number'>
        </div>
    </div>
</div>
<!-- Result Table Starts -->
<div class="rstable">
  <table id="paginated-list">
    <thead>
      <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Extn.</th>
      <th>Joined</th>
      <th>Salary</th>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
      <th>Browser</th>
      <th>Platform</th>
      <th>Engine</th>
      <th>Grade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-title="Name">Airi Satou</td>
        <td data-title="Position">Accountant</td>
        <td data-title="Office">No1</td>
        <td data-title="Extn.">1</td>
        <td data-title="Joined">Mar1</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">01</td>
        <td data-title="Country">Germany</td>
        <td data-title="Browser">Chrome1</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">97</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Angelica Ramos</td>
        <td data-title="Position">CEO</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">2</td>
        <td data-title="Joined">Mar2</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">02</td>
        <td data-title="Country">India</td>
        <td data-title="Browser">Chrome2</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">96</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Ashton Cox</td>
        <td data-title="Position">Technical Author</td>
        <td data-title="Office">Software Engineer</td>
        <td data-title="Extn.">3</td>
        <td data-title="Joined">Mar3</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">03</td>
        <td data-title="Country">Japan</td>
        <td data-title="Browser">Chrome3</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">95</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Bradley Greer</td>
        <td data-title="Position">Integration Specialist</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">4</td>
        <td data-title="Joined">Mar4</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">04</td>
        <td data-title="Country">UK</td>
        <td data-title="Browser">Chrome4</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">94</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Brenden Wagner</td>
        <td data-title="Position">Software Engineer</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">5</td>
        <td data-title="Joined">Mar</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">05</td>
        <td data-title="Country">USA</td>
        <td data-title="Browser">Chrome5</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">93</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Brielle Williamson</td>
        <td data-title="Position">Pre-Sales Support</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">6</td>
        <td data-title="Joined">Mar</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">06</td>
        <td data-title="Country">Canada</td>
        <td data-title="Browser">Chrome6</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">92</td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Bruno Nash</td>
        <td data-title="Position">Sales Assistant</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">7</td>
        <td data-title="Joined">Mar</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">07</td>
        <td data-title="Country">Italy</td>
        <td data-title="Browser">Chrome7</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">91 </td>
        <td data-title="Grade">A</td>
      </tr>
      <tr>
        <td data-title="Name">Caesar Vance</td>
        <td data-title="Position">Javascript Developer</td>
        <td data-title="Office">CR</td>
        <td data-title="Extn.">8</td>
        <td data-title="Joined">Mar</td>
        <td data-title="Salary">GKP</td>
        <td data-title="Company">Island Trading</td>
        <td data-title="Contact">08</td>
        <td data-title="Country">Mexico</td>
        <td data-title="Browser">Chrome8</td>
        <td data-title="Platform">Win 10</td>
        <td data-title="Engine">90</td>
        <td data-title="Grade">A</td>
      </tr>
    </tbody>
  </table>
</div>
<div style="width: 100%; display: flex;align-items: center;">
  <div style="text-align: left; width: 50%;">
      <span id="currpagecount">Showing 1 to 2 of </span><span id="totalrowscount">8</span>
  </div>
  <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" class="newpagination-numbers">
      <span id="currentPage"></span>/<span id="pageCount"></span>
    </div>
    <button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
      <span class="arrow-right"></span>
    </button>
  </div>
</div>

以下是正在工作的最终版本.希望你会喜欢

Javascript相关问答推荐

JavaScript文本区域阻止KeyDown/KeyUp事件本身上的Alt GR +键组合

为什么getRecord()会因为与_logger相关的错误而失败？(使用Hedera SDK)

将json数组项转换为js中的扁平

过滤对象数组并动态将属性放入新数组

在页面上滚动 timeshift 动垂直滚动条

Phaser 3 console. log()特定游戏角色的瓷砖属性

实现JS代码更改CSS元素

我怎么才能得到Kotlin的密文？

使用Google API无法进行Web抓取

在运行时使用Next JS App Router在服务器组件中运行自定义函数

React.Development.js和未捕获的ReferenceError：未定义useState

以Angular 实现ng-Circle-Progress时出错：模块没有导出的成员

在使用REACT更改了CSS类之后，无法更改CSS样式

变量在导入到Vite中的另一个js文件时成为常量.

TypeError：无法读取未定义的属性(正在读取'；宽度'；)

按什么顺序接收`storage`事件？

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

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

Firebase函数中的FireStore WHERE子句无法执行

如何在css中裁剪成一定Angular 的圆的一部分，而不需要复杂的多边形

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

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