Question

我正在使用angular创建一个仪表板，其中有一个带有搜索栏和分页的表格。无需在过滤器栏中输入值，一切都可以正常工作，但只要输入值，就可以在每页的分页上进行过滤。

示例-总记录-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;
     });

我希望过滤器页数后也重设。任何线索都会有所帮助。

Answer 1

我在Ionic移动应用程序上进行了分页-后台使用Angular ...

在我的版本中，我在RESTFIL Web服务上传递了页码和每页记录数作为参数。我还返回了下一个记录的键，并且在此之前，webservice可以轻松转到下一个/上一页。因此，每次我每页处理一组新数据时。所有繁重的工作和筛选选项都是在服务器端完成的，以免发回庞大的负载并筛选客户端。

使用Angular分页过滤

1 个答案: