ngTable使用AngularJS filter搜索时分页保留，如何展示全部过滤结果无需分页

你当前将过滤逻辑写在ng-repeat的管道中，ng-table自身的分页计算仅基于初始化时传入的原始dataset数据，感知不到视图层的过滤操作，因此分页参数、页码均按原始20条数据计算，才会出现搜索后第一页无匹配结果、需要手动翻页的问题。

1. 移除ng-repeat上的filter:searchFilter配置，将过滤逻辑整合到ng-table的内置参数中
2. 对搜索关键词添加监听，搜索值变化时自动将页码重置为第一页；如果需要直接展示全部过滤结果无需分页，可将单页展示条数设置为过滤后的总数据长度

修改后的JS代码 #

var app = angular.module('app', ["ngTable"]);
app.controller('ctrl',function($scope, NgTableParams){
  
      $scope.data = [
        {id:1,letter:"a"},
        {id:2,letter:"b"},
        {id:3,letter:"c"},
        {id:4,letter:"d"},
        {id:5,letter:"e"},
        {id:6,letter:"f"},
        {id:7,letter:"g"},
        {id:8,letter:"h"},
        {id:9,letter:"i"},
        {id:10,letter:"j"},
        {id:11,letter:"k"},
        {id:12,letter:"m"},
        {id:13,letter:"n"},
        {id:14,letter:"l"},
        {id:15,letter:"o"},
        {id:16,letter:"p"},
        {id:17,letter:"q"},
        {id:18,letter:"r"},
        {id:19,letter:"s"},
        {id:20,letter:"t"}
      ];
      
      // 监听搜索框值变化
      $scope.$watch('searchFilter', function (newVal) {
        // 调用ng-table内置全局模糊搜索
        $scope.tableParams.filter({ $: newVal });
        // 重置到第一页，避免当前页无匹配数据
        $scope.tableParams.page(1);
        // 若需要搜索时关闭分页、展示全部结果，取消注释下一行即可
        // $scope.tableParams.count($scope.tableParams.total());
      }, true);
      
      $scope.tableParams = new NgTableParams({ count: 5 }, {
        dataset:  $scope.data,
        counts: [5, 10, 15, 20]
      });
})

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.css">
 
<div ng-app="app">
  <div ng-controller="ctrl">
     <input type="search" ng-model="searchFilter" />
     <table data-ng-table="tableParams" data-show-filter="false" class="table table-bordered table-hover">
        <tr data-ng-repeat="i in $data">
        <td data-title="'Letter'">{{i.letter}}</td>
        </tr>
     </table>
  </div>
</div>

如果不需要保留搜索后的分页能力，直接取消JS代码中注释的$scope.tableParams.count($scope.tableParams.total());行即可，所有匹配搜索的结果会直接在当前页全部展示。

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