Angular仪表板分页过滤异常求助：过滤后页码需重置

我来帮你搞定这个分页和过滤冲突的问题！先拆解下你遇到的核心问题：

• 过滤仅在当前分页生效：因为你分页计算的是**原始数据集showdata**的总页数，而非过滤后的结果
• 过滤后页码未重置：没有监听过滤条件的变化来自动回到第一页

接下来一步步修正：

1. 先处理过滤后的数据集，再做分页 #

你需要把过滤后的结果存成一个临时变量，所有分页逻辑都基于这个变量，而不是直接在模板里链式过滤。这样能确保分页只针对过滤后的内容。

修改Angular控制器代码 #

$scope.curPage = 0;
$scope.pageSize = 13;

// 监听过滤条件变化，自动重置页码并更新过滤后的数据
$scope.$watch('namefilter.entity', function(newVal) {
  // 过滤数据：这里用Angular原生的过滤逻辑，也可以用你修正后的自定义过滤器
  if (!newVal) {
    $scope.filteredData = angular.copy($scope.showdata);
  } else {
    const lowerKeyword = newVal.toLowerCase();
    $scope.filteredData = $scope.showdata.filter(item => {
      // 这里根据你要过滤的字段调整，比如item.name或item.entity
      return item.name.toLowerCase().indexOf(lowerKeyword) > -1;
    });
  }
  // 过滤条件变化时，强制回到第一页
  $scope.curPage = 0;
});

// 计算总页数：基于过滤后的数据集，而非原始数据
$scope.numberOfPages = function() {
  return Math.ceil($scope.filteredData.length / $scope.pageSize);
};

// 修正你的pagination过滤器（逻辑没问题，确保基于过滤后的数据即可）
Report.filter('pagination', function() {
  return function(input, start) {
    start = +start;
    return input.slice(start);
  };
});

// 如果你想用自定义search过滤器，修正之前的错误：
Report.filter('search', function() {
  return function(items, keyword) {
    if (!keyword) return items;
    const lowerKeyword = keyword.toLowerCase();
    return items.filter(item => {
      return item.name.toLowerCase().indexOf(lowerKeyword) > -1;
    });
  };
});

2. 更新模板代码 #

模板里要基于filteredData做循环和分页控制，替换掉原始的showdata：

<table>
  <tr ng-repeat="show in filteredData | pagination: curPage * pageSize | limitTo: pageSize ">
    <td> {{show.name}}</td>
    <td> {{show.age}}</td>
  </tr>
</table>

<div class="pagination pagination-centered" ng-show="filteredData.length">
  <ul class="pagination-controle pagination">
    <li>
      <button type="button" class="btn btn-primary" ng-disabled="curPage == 0" ng-click="curPage=curPage-1">
        &lt;PREV
      </button>
    </li>
    <li>
      <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span>
    </li>
    <li>
      <button type="button" class="btn btn-primary" ng-disabled="curPage >= filteredData.length/pageSize - 1" ng-click="curPage = curPage+1">
        NEXT&gt;
      </button>
    </li>
  </ul>
</div>

关键修正点解释 #

• $watch监听过滤条件：用户输入过滤值时，自动重新过滤数据并把当前页重置为0，确保从第一页开始展示结果
• 基于filteredData做分页逻辑：总页数、分页按钮禁用状态都依赖过滤后的数据集，这样分页会完全适配过滤结果
• 修正自定义过滤器错误：你之前的search过滤器循环时误用了索引i而非实际数据项，现在用filter方法更简洁可靠

这样修改后，输入"SAM"时会先过滤出所有10个SAM用户，分页逻辑也会基于这10条数据计算，同时自动回到第一页，完全符合你的需求。

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