使用 Angular 进行分页过滤答案

【问题标题】：Filter with Pagination using Angular使用 Angular 进行分页过滤
【发布时间】：2019-07-21 06:21:17
【问题描述】：

我正在使用 Angular 创建一个仪表板，其中我有一个带有搜索栏和分页的表格。没有在过滤栏中输入值一切正常，但只要 ai 输入值。过滤发生在每页分页上。

示例 - 总记录 - 100 每页记录 =10 如果第一页包含 3 个人，第二页包含 7 个人姓名为 SAM，则第一页显示 3 个人，第二页显示 7。

下面是我的代码。

<table>
     <tr ng-repeat="show in showdata | filter:namefilter.entity | pagination: curPage * pageSize | limitTo: pageSize "* >
         <td> {{show.name}}</td>
         <td> {{show.age}}</td>
     </tr>
</table>
 <div class="pagination pagination-centered" ng-show="showdata.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 >= showdata.length/pageSize - 1" ng-click="curPage = curPage+1">NEXT&gt; </button>
           </li>
     </ul>
 </div>

角度代码

$scope.curPage = 0;
$scope.pageSize = 13;
$scope.numberOfPages = function()
{
    return Math.ceil($scope.showdata.length / $scope.pageSize);
};

Report.filter('pagination', function()
{
    return function(input, start)
    {
        start = +start;
        return input.slice(start);
    };
});

Report.filter('search', function() {
    return function(items, keyword) {
        /* if no keyword is entered, just display all the items*/
        if (!keyword) {
           return items;
        }
        else {
            var newItems = [];
            var keyword = keyword.toLowerCase();
            /*create new set of items where 'keyword' exists in object data*/
            for (var i in items) {
                if (i.entity.toLowerCase().indexOf(keyword) > -1 )
                 { newItems.push(i); }
                              }
                            }
             }
             $scope.numberOfPages = function()
          {


        return newItems;
     });

我想在过滤器页数也重置后。任何线索都会有所帮助。

【问题讨论】：

我不认为 ng-repeat 存在于 Agular2+ 中，仅存在于 AngularJS 中。您将需要改用 *ngFor。

标签： angular html pagination

【解决方案1】：

我在一个 Ionic 移动应用上进行了分页——它在后台使用 Angular...

在我的版本中，我在 RESTFIL Web 服务上传递了页码和每页记录数作为参数。我还返回了下一条记录的键，并在此之前使 web 服务更容易进入下一页/上一页。所以每次我处理每页的新设置。所有繁重的工作和过滤选项都在服务器端完成，以免发回巨大的有效负载和过滤客户端。

【讨论】：