使用Angular进行分页过滤

Question

我正在创建一个使用angular的仪表板，其中我有一个带有搜索栏和分页的表。没有在过滤器栏中输入值一切正常但是我很快就输入值。每页分页都会发生。

示例 - 总记录 - 每页100个记录= 10如果第一页包含3个人，第2个页面包含7个名称为SAM的人，那么它将在第一页显示3个人，在第2页显示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;
     });

我希望在过滤页面编号也重置之后。任何领导都会有所帮助。

Answer 1

我在一个Ionic移动应用程序上做了分页 - 在封面下使用Angular ...

在我的版本中，我将每页的页码和记录数作为参数传递给RESTFIL Web服务。我还返回了下一条记录的密钥，然后让webservice轻松转到下一页/前一页。所以每次我每页处理一套新的东西。所有繁重的工作和过滤选项都是在服务器端完成的，这样就不会发回大量的负载并过滤客户端。