如何在AngularJS中进行分页？

Question

我在内存中有大约1000个项目的数据集,并且我正在尝试为此数据集创建寻呼机,但我不确定如何执行此操作.

我正在使用自定义过滤器功能来过滤结果,并且工作正常,但不知何故,我需要获取页数.

有线索吗？

Answer 1

Angular UI Bootstrap - 分页指令

查看UI Bootstrap的分页指令.我最终使用它而不是这里发布的内容,因为它具有足够的功能供我当前使用,并且有一个完整的测试规范可以随之附带.

视图

<!-- table here -->

<pagination 
  ng-model="currentPage"
  total-items="todos.length"
  max-size="maxSize"  
  boundary-links="true">
</pagination>

<!-- items/page select here if you like -->

调节器

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.$watch("currentPage + numPerPage", function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

我做了一个工作的plunker供参考.

旧版本:

视图

<!-- table here -->

<div data-pagination="" data-num-pages="numPages()" 
  data-current-page="currentPage" data-max-size="maxSize"  
  data-boundary-links="true"></div>

<!-- items/page select here if you like -->

调节器

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.numPages = function () {
    return Math.ceil($scope.todos.length / $scope.numPerPage);
  };

  $scope.$watch("currentPage + numPerPage", function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

我做了一个工作的plunker供参考.

Answer 2

我最近为Built with Angular站点实现了分页.你来检查来源:https://github.com/angular/builtwith.angularjs.org

我会避免使用过滤器来分隔页面.您应该将项目分解为控制器中的页面.

Answer 3

我不得不用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>

而已.它具有以下功能:

• 控制器中不需要自定义代码将集合绑定items到分页链接.
• 您不必使用表格或网格视图 - 您可以对任何可以重复的内容进行分页!
• 委托给ng-repeat,所以你可以使用任何可以有效使用的表达式ng-repeat,包括过滤,排序等.
• 跨控制器工作 - pagination-controls指令不需要知道paginate调用该指令的上下文.

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

对于那些正在寻找"即插即用"解决方案的人来说,我认为你会觉得这很有用.

码

这个代码可以在GitHub上找到,包括一组非常好的测试:

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

如果您有兴趣,我还会写一篇简短的文章,对模块的设计有一点了解:http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

Answer 4

我刚刚使用btford代码在每个列上创建了一个JSFiddle,显示了分页+搜索+顺序:http://jsfiddle.net/SAWsA/11/

Answer 5

我更新了Scotty.NET的 plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview,以便它使用更新版本的angular,angular-ui和bootstrap.

调节器

var todos = angular.module('todos', ['ui.bootstrap']);

todos.controller('TodoController', function($scope) {
  $scope.filteredTodos = [];
  $scope.itemsPerPage = 30;
  $scope.currentPage = 4;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:'todo '+i, done:false});
    }
  };

  $scope.figureOutTodosToDisplay = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  };

  $scope.makeTodos(); 
  $scope.figureOutTodosToDisplay();

  $scope.pageChanged = function() {
    $scope.figureOutTodosToDisplay();
  };

});

Bootstrap UI组件

 <pagination boundary-links="true" 
    max-size="3" 
    items-per-page="itemsPerPage"
    total-items="todos.length" 
    ng-model="currentPage" 
    ng-change="pageChanged()"></pagination>

Answer 6

这是一个纯粹的JavaScript解决方案,我已经将其作为Angular服务包装,以实现像谷歌搜索结果中的分页逻辑.

关于CodePen的工作演示,请访问http://codepen.io/cornflourblue/pen/KVeaQL/

此博客文章中的详细信息和说明

function PagerService() {
    // service definition
    var service = {};

    service.GetPager = GetPager;

    return service;

    // service implementation
    function GetPager(totalItems, currentPage, pageSize) {
        // default to first page
        currentPage = currentPage || 1;

        // default page size is 10
        pageSize = pageSize || 10;

        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);

        var startPage, endPage;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = startIndex + pageSize;

        // create an array of pages to ng-repeat in the pager control
        var pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

Answer 7

下面的解决方案很简单。

<pagination  
        total-items="totalItems" 
        items-per-page= "itemsPerPage"
        ng-model="currentPage" 
        class="pagination-sm">
</pagination>

<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) "> 

这是示例jsfiddle