Question

我正在使用here

中的分页自定义构建

我不知道如何使pagination按钮与我的数据一起使用。我必须以某种方式过滤它吗？

这是我显示数据的地方：

<div  class="col-xs-12 col-md-4 content appear" ng-repeat="post in filterPosts | filter:searchPost | orderBy: sorting.orderBy:sorting.direction | filter : filterPost track by post.id">

之后，这就是分页部分：

<div ng-controller="PaginationController" class="col-xs-12" style="height: 50px;">                  
<pagination class="pagination" style="right: 10px; position: absolute; margin: 0px;" total-items="total_items" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination></div>

分页部分有一个更好的例子，但没有涉及数据。这是link

Answer 1

是的，您需要过滤数据。分页指令只是为您提供了一种向用户显示可能页面列表的方法，并允许用户轻松控制当前页面。您需要使用页面大小（默认为10）和当前页面值来过滤数据并显示正确的页面。

执行此操作的一种方法是添加其他过滤器以帮助您跳过：

app.filter('offset', function() {
    return function(input, start) {
        return input.slice(start);
    };
})

然后使用limitTo来控制分页

<div class="col-xs-12 col-md-4 content appear"
    ng-repeat="post in filterPosts | filter:searchPost
    | orderBy: sorting.orderBy:sorting.direction
    | filter : filterPost track by post.id
    | offset: (bigCurrentPage - 1) * 10
    | limitTo: 10">

示例JSFiddle here

如何使AngularJs UI boostrap分页与数据一起工作

1 个答案: