表格搜索仅第一页生效及分页行数显示调整求助

一、实现全表搜索功能 #

当前搜索仅在第一页生效，核心原因是搜索逻辑只处理了页面已渲染的当前页数据，而非全量数据集。分两种场景解决：

前端分页（全量数据已加载到本地） #

• 提前把完整数据源存入变量（比如fullTableData），不要只保留当前页数据
• 给搜索框添加输入监听，每次输入时对fullTableData进行关键词过滤，得到匹配结果集
• 将过滤后的结果集传入分页组件，重新渲染表格和分页栏

示例代码（原生JS）：

// 保存全量数据
const fullTableData = [/* 你的完整表格数据源 */];
const searchInput = document.getElementById('search-input');

searchInput.addEventListener('input', (e) => {
  const keyword = e.target.value.trim().toLowerCase();
  // 多列匹配可自行扩展，这里以name列为例
  const filteredData = fullTableData.filter(item => 
    item.name.toLowerCase().includes(keyword)
  );
  // 重新渲染分页表格
  renderPaginationTable(filteredData);
});

后端分页（数据从后端分页获取） #

• 搜索时将关键词作为参数传递给后端接口
• 后端接收关键词后，先对数据库全量数据做过滤查询，再返回分页后的结果
• 前端根据后端返回的过滤数据更新表格和分页组件

示例请求逻辑（fetch）：

async function getTableData(page = 1, keyword = '') {
  const res = await fetch(`/api/table?page=${page}&keyword=${encodeURIComponent(keyword)}`);
  return await res.json();
}

// 搜索框监听
searchInput.addEventListener('input', async (e) => {
  const keyword = e.target.value.trim();
  // 搜索后默认回到第一页
  const data = await getTableData(1, keyword);
  renderTable(data.list);
  updatePagination(data.total, data.currentPage);
});

二、调整分页行数显示顺序 #

找到分页组件中负责行数显示的部分，将当前页行数内容移至总行数前方即可：

原生JS场景 #

// 把原显示格式（如"共 100 条，当前页 10 条"）改为"当前页 10 条，共 100 条"
function updateRowDisplay(currentNum, totalNum) {
  const countEl = document.getElementById('row-count');
  countEl.textContent = `当前页 ${currentNum} 条，共 ${totalNum} 条`;
}

// 分页切换或搜索后调用该方法更新显示
updateRowDisplay(currentPageSize, totalCount);

UI框架场景（以Element UI为例） #

修改表格分页的layout和自定义显示文本：

<el-table
  :data="tableData"
  :pagination="{
    layout: 'prev, pager, next, jumper, ->, sizes, desc',
    desc: `当前页 ${currentPageSize} 条，共 ${total} 条`
  }"
></el-table>

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