本文提供一种将表格搜索与分页逻辑解耦于 dom 操作之外的现代实践方案——通过维护原始数据数组，统一在内存中完成搜索过滤与分页计算，确保搜索结果覆盖全量数据，并动态更新当前页/总页数及行数统计。
本文提供一种将表格搜索与分页逻辑解耦于 dom 操作之外的现代实践方案——通过维护原始数据数组，统一在内存中完成搜索过滤与分页计算，确保搜索结果覆盖全量数据，并动态更新当前页/总页数及行数统计。
在传统实现中（如原代码），搜索函数直接遍历
中所有真正的解决方案是：放弃对渲染后 DOM 的直接搜索，转而对原始数据源进行过滤与分页。这不仅解决了跨页搜索失效问题，还提升了性能、增强了可维护性，并为后续对接 API 打下坚实基础。
✅ 核心设计原则
- 单一数据源：用 JavaScript 数组（如 allDataList）作为唯一可信数据源；
- 搜索即过滤：onSearchTextChange() 对 allDataList 执行 .filter()，生成新数组；
- 分页即切片：renderTableContents() 接收任意数组（全量或搜索结果），按 startIdx 和 pageCount 切片渲染；
- 状态驱动 UI：页码、行数统计等全部由 startIdx、pageCount 和数据长度实时计算，而非读取 DOM。
? 关键代码实现解析
以下为精简、可复用的核心逻辑（已适配原 HTML 结构）：
// 1. 定义结构化数据源（替代硬编码 HTML 表格）
const allDataList = [
{ train: "15011 Kashi Express", type: "SuperFast", zone: "CR", /* ... */ },
{ train: "15012 Pushpak Express", type: "SuperFast", zone: "CR", /* ... */ },
// ... 更多数据项
];
// 2. 分页配置（每页显示条数）
const PAGE_SIZE = 2;
// 3. 渲染函数：接收任意数据数组，动态生成 tbody
function renderTableContents(data, hidePageInfo = false) {
const tbody = document.getElementById("paginated-list-body");
tbody.innerHTML = ""; // 清空
data.forEach(item => {
const row = document.createElement("tr");
Object.values(item).forEach(text => {
const cell = document.createElement("td");
cell.textContent = text;
row.appendChild(cell);
});
tbody.appendChild(row);
});
// 更新底部统计信息
const total = data.length;
const start = hidePageInfo ? 0 : Math.min((Math.floor(startIdx / PAGE_SIZE) + 1) * PAGE_SIZE - PAGE_SIZE + 1, total);
const end = hidePageInfo ? 0 : Math.min(startIdx + PAGE_SIZE, total);
document.getElementById("currNumber").textContent =
`Showing ${start} to ${end} of ${total}`;
document.getElementById("rowsNumber").textContent = ""; // 已合并进 currNumber
// 更新页码显示（如 "1/4"）
const totalPages = Math.ceil(total / PAGE_SIZE) || 1;
const currentPage = total === 0 ? 0 : Math.floor(startIdx / PAGE_SIZE) + 1;
document.getElementById("pagination-numbers").textContent =
`${currentPage}/${totalPages}`;
}
// 4. 全局状态与分页控制
let startIdx = 0;
// 上一页
function onPreviousClick() {
if (startIdx >= PAGE_SIZE) {
startIdx -= PAGE_SIZE;
renderTableContents(allDataList.slice(startIdx, startIdx + PAGE_SIZE));
}
}
// 下一页
function onNextClick() {
if (startIdx + PAGE_SIZE
item.train.toLowerCase().includes(keyword.toLowerCase())
);
startIdx = 0; // 搜索重置到第一页
renderTableContents(filtered, true); // hidePageInfo = true 避免显示无效范围
});
⚠️ 注意事项与最佳实践
-
HTML 结构适配：务必使用 替代静态
，确保 renderTableContents() 可完全接管内容生成； - 搜索字段扩展：当前仅搜索 train 字段，如需多字段匹配，可改写 filter 条件：
const filtered = allDataList.filter(item => Object.values(item).some(val => String(val).toLowerCase().includes(keyword.toLowerCase()) ) );- 性能边界：万级数据仍建议移交后端搜索；前端方案适用于 ≤5000 条记录；
- 无障碍增强：为分页按钮添加 aria-current="page" 动态属性，提升屏幕阅读器体验；
- 响应式兼容：本方案完全兼容原有 CSS 媒体查询，无需额外调整。
✅ 总结
将搜索与分页从“操作 DOM”升级为“操作数据”，是解决跨页搜索失效问题的根本路径。它让逻辑更清晰、行为更可预测、扩展更灵活。当你下次面对类似需求时，请牢记：永远先问自己——我的真实数据在哪？然后，所有视图都应是它的派生。
- 搜索字段扩展：当前仅搜索 train 字段，如需多字段匹配，可改写 filter 条件：
