如何实现Mat-table搜索指定城市后跳转至其所在分页？

核心逻辑 #

要实现“搜索城市名称后跳转到对应分页”，关键是基于完整原始数据源找到目标数据的位置，再计算出对应的页码，最后通过分页器组件跳转。

具体步骤 #

• 保留完整的原始城市数据数组（不要用过滤后的数组，确保所有数据都在计算范围内）
• 处理搜索输入：
  1. 在原始数据中匹配目标城市（支持忽略大小写匹配）
  2. 找到目标城市在数组中的索引位置
  3. 根据分页器的pageSize（每页条数）计算目标页码：目标页码索引 = Math.floor(目标索引 / pageSize)（注意MatPaginator的pageIndex从0开始）
  4. 调用分页器的方法跳转到目标页码，触发表格更新

代码示例 #

假设你已经初始化了MatTableDataSource和MatPaginator：

// 原始完整城市数据
originalCities: {name: string, population: number}[] = [...];
// 分页器实例
@ViewChild(MatPaginator) paginator!: MatPaginator;

// 搜索处理函数
handleCitySearch(searchValue: string) {
  const trimmedValue = searchValue.trim().toLowerCase();
  if (!trimmedValue) return;

  // 查找目标城市
  const targetCity = this.originalCities.find(city => city.name.toLowerCase() === trimmedValue);
  if (!targetCity) {
    console.log('未找到该城市');
    return;
  }

  // 计算目标索引和页码
  const targetIndex = this.originalCities.indexOf(targetCity);
  const targetPageIndex = Math.floor(targetIndex / this.paginator.pageSize);

  // 跳转到目标页
  this.paginator.pageIndex = targetPageIndex;
  // 手动触发分页更新，确保表格刷新
  this.paginator._changePageSize(this.paginator.pageSize);
}

注意事项 #

• 如果表格启用了排序功能，计算索引时要使用排序后的完整数组，否则页码计算会出错
• 可以给搜索输入添加防抖处理（比如用RxJS的debounceTime），避免输入过程中频繁触发计算
• 未找到目标城市时，建议添加前端提示（比如Toast或文本提示），提升用户体验

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