如何在清空搜索框时仅显示当前分页的数据-html教程-PHP中文网

如何在清空搜索框时仅显示当前分页的数据

当用户清空搜索框时，表格应恢复显示当前页的5条数据，而非全部结果；本文提供一套结构清晰、符合现代 javascript 最佳实践的解决方案，涵盖搜索逻辑重写、分页状态维护及 dom 操作优化。

当用户清空搜索框时，表格应恢复显示当前页的5条数据，而非全部结果；本文提供一套结构清晰、符合现代 javascript 最佳实践的解决方案，涵盖搜索逻辑重写、分页状态维护及 dom 操作优化。

在实现带搜索功能的分页表格时，一个常见但易被忽视的问题是：清空搜索框后，所有原始数据被无条件显示，破坏了当前分页上下文。根本原因在于原代码中 searchTable() 函数未区分“空搜索”与“有效搜索”，且缺乏对分页状态的主动维护——它直接遍历全部 <tr> 并设置 <code>display 样式，覆盖了分页逻辑对行可见性的控制。

✅ 正确处理逻辑：搜索与分页解耦 + 状态感知

核心改进思路有三点：

统一数据源管理：始终基于 dataRows（即 tbody 中的纯数据行数组）操作，避免混用 table.getElementsByTagName("tr") 导致的表头/非数据行干扰；
空搜索即“恢复当前页”：当 filter === '' 时，跳过全文匹配，直接调用 displayRows(currentPage)，保持用户当前浏览位置；
搜索前重置状态：每次搜索开始前，先隐藏所有 dataRows，再根据匹配结果选择性显示——确保搜索结果独立于分页状态，同时避免残留样式干扰。

以下是重构后的完整逻辑（已整合进 DOMContentLoaded 事件）：

document.addEventListener("DOMContentLoaded", function () {
    const table = document.getElementById("myTable");
    const tbody = table.querySelector("tbody");
    // ✅ 安全提取数据行（排除表头、脚注等）
    const dataRows = Array.from(tbody.querySelectorAll("tr")).slice(1);
    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) => {
            row.style.display = (index >= startIndex && index  {
            if (currentPage > 1) {
                currentPage--;
                displayRows(currentPage);
                updatePaginationButtons();
            }
        });
        paginationDiv.appendChild(prevButton);

        // Page buttons
        for (let i = 1; i  {
                currentPage = i;
                displayRows(currentPage);
                updatePaginationButtons();
            });
            paginationDiv.appendChild(button);
        }

        // Next button
        const nextButton = document.createElement("button");
        nextButton.textContent = "Next";
        nextButton.addEventListener("click", () => {
            if (currentPage  {
            btn.classList.toggle("active", idx === currentPage);
        });
    }

    function searchTable() {
        const input = document.getElementById("myInput");
        const filter = input.value.trim().toUpperCase();

        // ✅ 关键修复：空搜索 → 恢复当前页
        if (filter === "") {
            displayRows(currentPage);
            return;
        }

        // ✅ 先隐藏所有数据行
        dataRows.forEach(row => row.style.display = "none");

        // ✅ 逐行匹配（支持多列模糊搜索）
        dataRows.forEach(row => {
            const cells = row.querySelectorAll("td");
            let matched = false;
            for (const cell of cells) {
                const text = (cell.textContent || cell.innerText).toUpperCase();
                if (text.includes(filter)) {
                    matched = true;
                    break;
                }
            }
            if (matched) row.style.display = "";
        });

        // ✅ 搜索后仍需刷新分页控件（显示总页数，但不跳转）
        displayPagination();
    }

    // ✅ 绑定事件 & 初始化
    document.getElementById("myInput").addEventListener("input", searchTable);
    headerRow.style.display = "";
    displayRows(currentPage);
    displayPagination();
});

⚠️ 注意事项与最佳实践

避免 var 和全局污染：本方案全程使用 const/let，函数作用域清晰，无隐式全局变量；
querySelectorAll 优于 getElementsByTagName：前者返回静态 NodeList，更可靠；后者返回动态 HTMLCollection，易因 DOM 变更引发意外行为；
.trim() 防止空格误判：用户可能输入空格后回删，trim() 确保语义上真正的“空”；
分页按钮状态更新优化：updatePaginationButtons() 使用 toggle 替代冗余的 add/remove，逻辑更健壮；
性能提示：若数据量极大（>1000 行），建议结合虚拟滚动或服务端分页，前端过滤仅适用于中小型数据集。