如何在AngularJS中进行分页?

下面的代码将有助于在后端提供自定义分页角repeat。

你的数据会在

$scope.myticketIssuesData = [];
$scope.allticketIssuesData = [];

2021-12-08 19:35:22

jQuery Mobile angular适配器有一个分页过滤器，你可以基于它。

下面是一个使用它的演示小提琴(添加超过5个项目，它就会变成页面):http://jsfiddle.net/tigbro/Du2DY/

来源如下:https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js

2012-05-30 14:20:43

老问题，但因为我认为我的方法有点不同，不那么复杂，我将分享这一点，希望除了我之外的人觉得它有用。

我发现一个简单而又小的分页解决方案是将一个指令与一个使用相同作用域变量的过滤器结合起来。

为了实现这一点，你在数组上添加过滤器，并像这样添加directiv

<div class="row">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
                <td>{{item.Name}}</td>
                <td>{{item.Price}}</td>
                <td>{{item.Quantity}}</td>
            </tr>
        </tbody>
    </table>
    <div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>

p_Size和p_Step是作用域变量，可以在作用域中自定义，否则p_Size的默认值为5,p_Step为1。

当分页中的步骤发生变化时，p_Step将被更新，并将触发cust_pagination过滤器进行新的过滤。 cust_pagination过滤器然后根据p_Step值对数组进行切片，如下所示，只返回分页部分中选择的活动记录

var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;

在这个活塞中查看完整的解决方案

2016-10-26 12:59:09

从Angular 1.4开始，limitTo过滤器也接受第二个可选参数begin

从文档中可以看出:

{{limitTo_expression | limitTo: limit: begin}} 开始 (可选) 字符串|数字开始限制的索引。作为一个负索引，begin表示从输入的末尾开始的偏移量。默认值为0。

所以你不需要创建一个新的指令，这个参数可以用来设置分页的偏移量

ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage"

2017-11-27 12:57:42

这是我的例子。选中按钮在列表中间控制器。配置> > >

 $scope.pagination = {total: null, pages: [], config: {count: 10, page: 1, size: 7}};

分页逻辑:

/*
     Pagination
     */
    $scope.$watch('pagination.total', function (total) {
        if(!total || total <= $scope.pagination.config.count) return;
        _setPaginationPages(total);
    });

    function _setPaginationPages(total) {
        var totalPages = Math.ceil(total / $scope.pagination.config.count);
        var pages = [];
        var start = $scope.pagination.config.page - Math.floor($scope.pagination.config.size/2);
        var finish = null;

        if((start + $scope.pagination.config.size - 1) > totalPages){
            start = totalPages - $scope.pagination.config.size;
        }
        if(start <= 0) {
            start = 1;
        }

       finish = start +  $scope.pagination.config.size - 1;
       if(finish > totalPages){
           finish = totalPages;
       }


        for (var i = start; i <= finish; i++) {
            pages.push(i);
        }

        $scope.pagination.pages = pages;
    }

    $scope.$watch("pagination.config.page", function(page){
        _setPaginationPages($scope.pagination.total);
        _getRespondents($scope.pagination.config);
    });

以及我对引导的看法

<ul ng-class="{hidden: pagination.total == 0}" class="pagination">
        <li ng-click="pagination.config.page = pagination.config.page - 1"
            ng-class="{disabled: pagination.config.page == 1}" ><a href="#">&laquo;</a></li>
        <li ng-repeat="p in pagination.pages"
            ng-click="pagination.config.page = p"
            ng-class="{active: p == pagination.config.page}"><a href="#">{{p}}</a></li>
        <li ng-click="pagination.config.page = pagination.config.page + 1"
            ng-class="{disabled: pagination.config.page == pagination.pages.length}"><a href="#">&raquo;</a></li>
    </ul >

它很有用

2014-06-18 07:53:53

Angular-Paging

是个不错的选择

帮助对大型数据集进行分页的指令，同时要求最少的实际分页信息。在这个分页方案中，我们非常依赖于服务器来“过滤”结果。其核心思想是我们只想保存项目的活动“页”——而不是将整个项目列表保存在内存中并在客户端分页。

2016-01-21 12:25:27

如何在AngularJS中进行分页?

推荐文章

最新文章

标签