如何在AngularJS中进行分页?

我曾经多次使用Angular实现分页，对于一些我觉得可以简化的东西来说，这总是有点麻烦。我使用了这里和其他地方介绍的一些想法来创建一个分页模块，使分页变得简单如下:

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>

// then somewhere else on the page ....

<dir-pagination-controls></dir-pagination-controls>

就是这样。它具有以下特点:

在控制器中不需要自定义代码来将集合项绑定到分页链接。你不需要使用表格或gridview -你可以对任何你可以重复的东西进行分页! 委托给ng-repeat，所以你可以使用任何可以在ng-repeat中有效使用的表达式，包括过滤、排序等。跨控制器工作——分页控制指令不需要知道调用paginate指令的上下文的任何信息。

演示:http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

对于那些正在寻找“即插即用”解决方案的人来说，我想你会发现这篇文章很有用。

Code

代码可以在GitHub上找到，包括一组很好的测试:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

如果你感兴趣，我还写了一篇关于模块设计的小文章:http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

2014-05-10 07:24:44

前面的消息基本上推荐了如何自己构建分页。如果你和我一样，更喜欢一个完整的指令，我刚刚发现了一个很棒的指令，叫做ngTable。它支持排序、过滤和分页。

这是一个非常干净的解决方案，你所需要的是:

   <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>

在控制器中:

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        name: 'asc'     // initial sorting
    }
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;

        var start = (params.page() - 1) * params.count();
        var end = params.page() * params.count();

        $defer.resolve(orderedData.slice( start, end));
    }
});

GitHub链接:https://github.com/esvit/ng-table/

2014-02-18 11:10:28

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

我曾经多次使用Angular实现分页，对于一些我觉得可以简化的东西来说，这总是有点麻烦。我使用了这里和其他地方介绍的一些想法来创建一个分页模块，使分页变得简单如下:

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>

// then somewhere else on the page ....

<dir-pagination-controls></dir-pagination-controls>

就是这样。它具有以下特点:

在控制器中不需要自定义代码来将集合项绑定到分页链接。你不需要使用表格或gridview -你可以对任何你可以重复的东西进行分页! 委托给ng-repeat，所以你可以使用任何可以在ng-repeat中有效使用的表达式，包括过滤、排序等。跨控制器工作——分页控制指令不需要知道调用paginate指令的上下文的任何信息。

演示:http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

对于那些正在寻找“即插即用”解决方案的人来说，我想你会发现这篇文章很有用。

Code

代码可以在GitHub上找到，包括一组很好的测试:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

如果你感兴趣，我还写了一篇关于模块设计的小文章:http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

2014-05-10 07:24:44

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

你的数据会在

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

2021-12-08 19:35:22

对于那些发现像我一样很难为一个表创建分页器的人，我发布了这个。所以，在你看来:

          <pagination total-items="total" items-per-page="itemPerPage"    ng-model="currentPage" ng-change="pageChanged()"></pagination>    
        <!-- To specify your choice of items Per Pages-->
     <div class="btn-group">
                <label class="btn btn-primary" ng-model="radioModel"  btn-radio="'Left'" data-ng-click="setItems(5)">5</label>
                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'" data-ng-click="setItems(10)">10</label>
                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'" data-ng-click="setItems(15)">15</label>
            </div>
     //And don't forget in your table:
      <tr data-ng-repeat="p in profiles | offset: (currentPage-1)*itemPerPage | limitTo: itemPerPage" >

在你的angularJs中:

  var module = angular.module('myapp',['ui.bootstrap','dialogs']);
  module.controller('myController',function($scope,$http){
   $scope.total = $scope.mylist.length;     
   $scope.currentPage = 1;
   $scope.itemPerPage = 2;
   $scope.start = 0;

   $scope.setItems = function(n){
         $scope.itemPerPage = n;
   };
   // In case you can replace ($scope.currentPage - 1) * $scope.itemPerPage in <tr> by "start"
   $scope.pageChanged = function() {
        $scope.start = ($scope.currentPage - 1) * $scope.itemPerPage;
            };  
});
   //and our filter
     module.filter('offset', function() {
              return function(input, start) {
                start = parseInt(start, 10);
                return input.slice(start);
              };
            });

2015-04-20 12:26:23

如何在AngularJS中进行分页?

推荐文章

最新文章

标签