搜索框清空后，所有数据都出现在我的分页上

Question

我的搜索框遇到问题。当我清除它时，分页中的所有数据都会出现。我的目标是它在清除时仅返回当前活动页面上显示的五个数据条目。

document.getElementById("myInput").addEventListener("input", searchTable);

function searchTable() {
  var input, filter, table, tr, td, i, j, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {
    var displayRow = false;
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j++) {
      if (td[j]) {
        txtValue = td[j].textContent || td[j].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          displayRow = true;
          break; // Break the inner loop if match found in any column
        }
      }
    }
    if (displayRow) {
      tr[i].style.display = "";
      displayPagination();
    } else {
      tr[i].style.display = "none";
    }
  }
}

document.addEventListener("DOMContentLoaded", function () {
  const table = document.getElementById("myTable");
  const tbody = table.querySelector("tbody");
  const dataRows = Array.from(tbody.getElementsByTagName("tr")).slice(1); // Exclude header row
  const headerRow = table.querySelector(".header");
  const itemsPerPage = 5;
  let currentPage = 1;

  function displayRows(page) {
    const startIndex = (page - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    dataRows.forEach((row, index) => {
      if (index >= startIndex && index < endIndex) {
        row.style.display = "";
      } else {
        row.style.display = "none";
      }
    });
  }

  function displayPagination() {
    const pageCount = Math.ceil(dataRows.length / itemsPerPage);
    const paginationDiv = document.querySelector(".pagination");
    paginationDiv.innerHTML = "";

    // Previous button
    const prevButton = document.createElement("button");
    prevButton.textContent = "Prev";
    prevButton.addEventListener("click", function () {
      if (currentPage > 1) {
        currentPage--;
        displayRows(currentPage);
        updatePaginationButtons();
      }
    });
    paginationDiv.appendChild(prevButton);

    // Page buttons
    for (let i = 1; i <= pageCount; i++) {
      const button = document.createElement("button");
      button.textContent = i;
      if (i === currentPage) {
        button.classList.add("active");
      }
      button.addEventListener("click", function () {
        currentPage = i;
        displayRows(currentPage);
        updatePaginationButtons();
      });
      paginationDiv.appendChild(button);
    }

    // Next button
    const nextButton = document.createElement("button");
    nextButton.textContent = "Next";
    nextButton.addEventListener("click", function () {
      if (currentPage < pageCount) {
        currentPage++;
        displayRows(currentPage);
        updatePaginationButtons();
      }
    });
    paginationDiv.appendChild(nextButton);
  }

  function updatePaginationButtons() {
    const paginationButtons = document.querySelectorAll(".pagination button");
    paginationButtons.forEach((button, index) => {
      if (index === currentPage) {
        button.classList.add("active");
      } else {
        button.classList.remove("active");
      }
    });
  }

  // Initially display header row
  headerRow.style.display = "";

  displayRows(currentPage);
  displayPagination();
});


    <input
      type="text"
      id="myInput"
      placeholder="Search for names.."
      title="Type in a name"
    />
    <table id="myTable">
      <tr class="header">
        <th>#</th>
        <th style="width: 60%">Name</th>
        <th style="width: 40%">Country</th>
        <th style="width: 40%">Age</th>
        <th style="width: 40%">Email</th>
        <th style="width: 40%">Surname</th>
        <th style="width: 40%">Middlename</th>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Alfreds Futterkiste</td>
        <td>Germany</td>
        <td>31</td>
        <td>[email protected]</td>
        <td>Alfie</td>
        <td>Papa</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Berglunds snabbkop</td>
        <td>Sweden</td>
        <td>21</td>
        <td>[email protected]</td>
        <td>shy</td>
        <td>Mama</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Island Trading</td>
        <td>UK</td>
        <td>31</td>
        <td>[email protected]</td>
        <td>xerxe</td>
        <td>cici</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Koniglich Essen</td>
        <td>Germany</td>
        <td>54</td>
        <td>[email protected]</td>
        <td>naknak</td>
        <td>fiif</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Laughing Bacchus Winecellars</td>
        <td>Canada</td>
        <td>43</td>
        <td>[email protected]</td>
        <td>neknek</td>
        <td>pekpek</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Italy</td>
        <td>23</td>
        <td>[email protected]</td>
        <td>hikhik</td>
        <td>hokhok</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>North/South</td>
        <td>UK</td>
        <td>32</td>
        <td>[email protected]</td>
        <td>tektek</td>
        <td>kita</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Paris specialites</td>
        <td>France</td>
        <td>65</td>
        <td>[email protected]</td>
        <td>tektek</td>
        <td>leklek</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Koniglich Essen</td>
        <td>Germany</td>
        <td>54</td>
        <td>[email protected]</td>
        <td>naknak</td>
        <td>fiif</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Laughing Bacchus Winecellars</td>
        <td>Canada</td>
        <td>43</td>
        <td>[email protected]</td>
        <td>neknek</td>
        <td>pekpek</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Italy</td>
        <td>23</td>
        <td>[email protected]</td>
        <td>hikhik</td>
        <td>hokhok</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>North/South</td>
        <td>UK</td>
        <td>32</td>
        <td>[email protected]</td>
        <td>tektek</td>
        <td>kita</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Paris specialites</td>
        <td>France</td>
        <td>65</td>
        <td>[email protected]</td>
        <td>tektek</td>
        <td>leklek</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Koniglich Essen</td>
        <td>Germany</td>
        <td>54</td>
        <td>[email protected]</td>
        <td>naknak</td>
        <td>fiif</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Laughing Bacchus Winecellars</td>
        <td>Canada</td>
        <td>43</td>
        <td>[email protected]</td>
        <td>neknek</td>
        <td>pekpek</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Italy</td>
        <td>23</td>
        <td>[email protected]</td>
        <td>hikhik</td>
        <td>hokhok</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>North/South</td>
        <td>UK</td>
        <td>32</td>
        <td>[email protected]</td>
        <td>tektek</td>
        <td>kita</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Paris specialites</td>
        <td>France</td>
        <td>65</td>
        <td>[email protected]</td>
        <td>tektek</td>
        <td>leklek</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Koniglich Essen</td>
        <td>Germany</td>
        <td>54</td>
        <td>[email protected]</td>
        <td>naknak</td>
        <td>fiif</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Laughing Bacchus Winecellars</td>
        <td>Canada</td>
        <td>43</td>
        <td>[email protected]</td>
        <td>neknek</td>
        <td>pekpek</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Italy</td>
        <td>23</td>
        <td>[email protected]</td>
        <td>hikhik</td>
        <td>hokhok</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>North/South</td>
        <td>UK</td>
        <td>32</td>
        <td>[email protected]</td>
        <td>tektek</td>
        <td>kita</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="name1" />&nbsp;</td>
        <td>Paris specialites</td>
        <td>France</td>
        <td>65</td>
        <td>[email protected]</td>
        <td>tektek</td>
        <td>leklek</td>
      </tr>
    </table>


Can anyone help me how to fix this issue? 

我尝试通过将 displayPagination() 函数放置在 Sort 函数中来解决该问题，但它仍然无法正常运行。此外，当我尝试再次搜索时，所有数据都会出现在我的表格中。

Answer 1

要使表格在清除搜索框时仅显示第一个分页页上的行，需要在

searchTable

函数中进行一些调整。比如在搜索之前将所有行重置为隐藏，单独处理空搜索，以及

displayRow

重置每行以根据搜索进行过滤。

此外，您提供的代码中从使用

var

到代码的结构和格式都有很多不好的做法。我做了一些更改，并在您提供的 JS 代码的更新版本中添加了最大的最佳实践，希望它也能满足您的要求并解决您面临的问题。

document.addEventListener("DOMContentLoaded", function () {
    const table = document.getElementById("myTable");
    const tbody = table.querySelector("tbody");
    const dataRows = Array.from(tbody.getElementsByTagName("tr")).slice(1); // Not Include header row
    const headerRow = table.querySelector(".header");
    const itemsPerPage = 5;
    let currentPage = 1;

    // Function to display rows according to the current page
    function displayRows(page) {
        const startIndex = (page - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        dataRows.forEach((row, index) => {
            if (index >= startIndex && index < endIndex) {
                row.style.display = "";
            } else {
                row.style.display = "none";
            }
        });
    }

    // Function to display pagination
    function displayPagination() {
        const pageCount = Math.ceil(dataRows.length / itemsPerPage);
        const paginationDiv = document.querySelector(".pagination");
        paginationDiv.innerHTML = "";

        // Previous button
        const prevButton = document.createElement("button");
        prevButton.textContent = "Prev";
        prevButton.addEventListener("click", function () {
            if (currentPage > 1) {
                currentPage--;
                displayRows(currentPage);
                updatePaginationButtons();
            }
        });
        paginationDiv.appendChild(prevButton);

        // Page buttons
        for (let i = 1; i <= pageCount; i++) {
            const button = document.createElement("button");
            button.textContent = i;
            if (i === currentPage) {
                button.classList.add("active");
            }
            button.addEventListener("click", function () {
                currentPage = i;
                displayRows(currentPage);
                updatePaginationButtons();
            });
            paginationDiv.appendChild(button);
        }

        // Next button
        const nextButton = document.createElement("button");
        nextButton.textContent = "Next";
        nextButton.addEventListener("click", function () {
            if (currentPage < pageCount) {
                currentPage++;
                displayRows(currentPage);
                updatePaginationButtons();
            }
        });
        paginationDiv.appendChild(nextButton);
    }

    // Function to update pagination buttons
    function updatePaginationButtons() {
        const paginationButtons = document.querySelectorAll(".pagination button");
        paginationButtons.forEach((button, index) => {
            if (index === currentPage) {
                button.classList.add("active");
            } else {
                button.classList.remove("active");
            }
        });
    }

    // Function to search the table
    function searchTable() {
        const input = document.getElementById("myInput");
        const filter = input.value.toUpperCase();
        let displayRow = false;

        // Reset all rows to be hidden
        dataRows.forEach(row => row.style.display = "none");

        // If input is empty, reset to the current page
        if (filter === '') {
            displayRows(currentPage);
            return;
        }

        // Search through the rows
        dataRows.forEach((row, index) => {
            const td = row.getElementsByTagName("td");
            for (let j = 0; j < td.length; j++) {
                const txtValue = td[j].textContent || td[j].innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    displayRow = true;
                    break;
                }
            }
            if (displayRow) {
                row.style.display = "";
                displayRow = false; // Reset for the next row
            }
        });

        // Update pagination to reflect the search results
        displayPagination();
    }

    // Event listener for the search input
    document.getElementById("myInput").addEventListener("input", searchTable);

    // Initially display header row and pagination
    headerRow.style.display = "";
    displayRows(currentPage);
    displayPagination();
});