前端新手求助：为带搜索的HTML表格添加无jQuery分页（每页5行）

先给你梳理清楚实现步骤：先补充分页的HTML容器，再加基础样式美化，最后用JS整合搜索和分页逻辑，确保搜索后的结果也能按每页5行显示。

1. 补充HTML结构 #

在你的</table>标签后面，添加分页控件的容器：

<div id="pagination" class="pagination"></div>

2. 添加基础CSS样式 #

给分页按钮加些实用样式，提升交互体验：

.pagination {
  margin-top: 15px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.pagination button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

3. 核心JavaScript逻辑 #

这段代码会同时处理多列搜索过滤和分页控制，解决你搜索后显示所有结果的问题：

const table = document.getElementById('userstable');
const tbody = table.querySelector('tbody');
const paginationContainer = document.getElementById('pagination');
const searchInputs = document.querySelectorAll('.search-input');
const rowsPerPage = 5;
let currentPage = 1;
let filteredRows = [...tbody.querySelectorAll('tr')];

// 监听所有搜索框输入
searchInputs.forEach(input => {
  input.addEventListener('input', () => {
    filterRows();
    currentPage = 1; // 搜索后自动回到第一页
    renderPagination();
    showPage(currentPage);
  });
});

// 按搜索框内容过滤表格行
function filterRows() {
  const filters = Array.from(searchInputs).map(input => input.value.toLowerCase().trim());
  
  filteredRows = [...tbody.querySelectorAll('tr')].filter(row => {
    const cells = Array.from(row.querySelectorAll('td')).map(cell => cell.textContent.toLowerCase().trim());
    // 每列只匹配对应搜索框的内容，空搜索框不限制该列
    return cells.every((cellText, index) => {
      return filters[index] === '' || cellText.includes(filters[index]);
    });
  });
}

// 动态生成分页按钮
function renderPagination() {
  paginationContainer.innerHTML = '';
  const totalPages = Math.ceil(filteredRows.length / rowsPerPage);
  
  // 上一页按钮
  const prevBtn = document.createElement('button');
  prevBtn.textContent = '上一页';
  prevBtn.disabled = currentPage === 1;
  prevBtn.addEventListener('click', () => {
    if (currentPage > 1) {
      currentPage--;
      renderPagination();
      showPage(currentPage);
    }
  });
  paginationContainer.appendChild(prevBtn);
  
  // 页码按钮
  for (let i = 1; i <= totalPages; i++) {
    const pageBtn = document.createElement('button');
    pageBtn.textContent = i;
    if (i === currentPage) pageBtn.classList.add('active');
    pageBtn.addEventListener('click', () => {
      currentPage = i;
      renderPagination();
      showPage(currentPage);
    });
    paginationContainer.appendChild(pageBtn);
  }
  
  // 下一页按钮
  const nextBtn = document.createElement('button');
  nextBtn.textContent = '下一页';
  nextBtn.disabled = currentPage === totalPages || totalPages === 0;
  nextBtn.addEventListener('click', () => {
    if (currentPage < totalPages) {
      currentPage++;
      renderPagination();
      showPage(currentPage);
    }
  });
  paginationContainer.appendChild(nextBtn);
}

// 显示指定页的表格行
function showPage(page) {
  // 先隐藏所有行
  tbody.querySelectorAll('tr').forEach(row => row.style.display = 'none');
  
  // 计算当前页的行范围
  const startIndex = (page - 1) * rowsPerPage;
  const endIndex = startIndex + rowsPerPage;
  const rowsToShow = filteredRows.slice(startIndex, endIndex);
  
  // 显示对应行
  rowsToShow.forEach(row => row.style.display = 'table-row');
}

// 初始化页面
renderPagination();
showPage(currentPage);

关键说明 #

• 搜索逻辑：每列搜索框独立过滤对应列内容，空搜索框不会对该列做限制
• 分页逻辑：搜索后自动重置到第一页，分页按钮会根据过滤后的结果总数动态生成
• 适配场景：直接操作DOM显示/隐藏行，适合中小数据量的表格，完全满足你的实训需求

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