HTML表格搜索仅支持当前分页，需全局搜索及动态行数统计

核心逻辑 #

• 把表格所有原始数据存储在数组中，不局限于当前DOM中的行，确保搜索覆盖全部数据
• 搜索时基于原始数据数组过滤，得到匹配结果后再执行分页处理
• 行数统计根据过滤后的总数据量和当前分页范围动态计算更新

完整实现代码 #

HTML 结构 #

<!-- 搜索框 -->
<input type="text" id="tableSearch" placeholder="全局搜索...">

<!-- 数据表格 -->
<table id="dataTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>分类</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- 数据行通过JS动态渲染 -->
  </tbody>
</table>

<!-- 分页控件 -->
<div class="pagination">
  <button id="prevPage">上一页</button>
  <span id="pageInfo"></span>
  <button id="nextPage">下一页</button>
</div>

<!-- 行数统计区域 -->
<div id="rowCount">显示0至0条，共0条</div>

JavaScript 实现 #

// DOM元素获取
const tableBody = document.getElementById('tableBody');
const searchInput = document.getElementById('tableSearch');
const prevBtn = document.getElementById('prevPage');
const nextBtn = document.getElementById('nextPage');
const rowCountEl = document.getElementById('rowCount');

// 原始数据源（实际项目可替换为后端接口返回数据）
const originalData = [
  { id: 1, name: '商品A', category: '电子产品' },
  { id: 2, name: '商品B', category: '家居用品' },
  { id: 3, name: '商品C', category: '电子产品' },
  { id: 4, name: '商品D', category: '服饰' },
  { id: 5, name: '商品E', category: '家居用品' },
  { id: 6, name: '商品F', category: '电子产品' },
  { id: 7, name: '商品G', category: '服饰' },
  { id: 8, name: '商品H', category: '家居用品' }
];

// 全局状态变量
let filteredData = [...originalData]; // 过滤后的数据集合
let currentPage = 1;
const rowsPerPage = 2; // 每页显示条数

// 初始化表格
function initTable() {
  renderTable();
  updateRowCount();
  updatePaginationBtnState();
}

// 渲染当前页表格内容
function renderTable() {
  const startIndex = (currentPage - 1) * rowsPerPage;
  const endIndex = startIndex + rowsPerPage;
  const currentPageData = filteredData.slice(startIndex, endIndex);

  // 清空表格body
  tableBody.innerHTML = '';

  // 生成当前页数据行
  currentPageData.forEach(item => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.category}</td>
    `;
    tableBody.appendChild(row);
  });
}

// 更新行数统计文本
function updateRowCount() {
  const start = filteredData.length === 0 ? 0 : (currentPage - 1) * rowsPerPage + 1;
  const end = Math.min(currentPage * rowsPerPage, filteredData.length);
  rowCountEl.textContent = `显示${start}至${end}条，共${filteredData.length}条`;
}

// 更新分页按钮禁用状态
function updatePaginationBtnState() {
  prevBtn.disabled = currentPage === 1;
  nextBtn.disabled = currentPage * rowsPerPage >= filteredData.length;
}

// 全局搜索处理
function handleSearch() {
  const keyword = searchInput.value.trim().toLowerCase();
  // 多字段匹配过滤原始数据
  filteredData = originalData.filter(item => {
    return (
      item.id.toString().includes(keyword) ||
      item.name.toLowerCase().includes(keyword) ||
      item.category.toLowerCase().includes(keyword)
    );
  });
  currentPage = 1; // 搜索后重置到第一页
  renderTable();
  updateRowCount();
  updatePaginationBtnState();
}

// 上一页切换
function handlePrevPage() {
  if (currentPage > 1) {
    currentPage--;
    renderTable();
    updateRowCount();
    updatePaginationBtnState();
  }
}

// 下一页切换
function handleNextPage() {
  if (currentPage * rowsPerPage < filteredData.length) {
    currentPage++;
    renderTable();
    updateRowCount();
    updatePaginationBtnState();
  }
}

// 绑定事件监听
searchInput.addEventListener('input', handleSearch);
prevBtn.addEventListener('click', handlePrevPage);
nextBtn.addEventListener('click', handleNextPage);

// 页面加载完成后初始化
initTable();

关键细节说明 #

• 全局搜索：通过操作原始数据数组实现过滤，确保搜索覆盖所有分页数据，而非仅当前页DOM元素
• 分页逻辑：基于过滤后的数据集进行分页截取，保证搜索结果仍遵循原有的每页条数限制
• 动态统计：每次渲染表格或执行搜索后，重新计算当前页的起止条数和总匹配条数，实时更新统计文本
• 按钮状态控制：根据当前页位置自动禁用/启用分页按钮，避免无效操作

内容的提问来源于stack exchange，提问作者Shoeb Siddique