Comment faire de la pagination en AngularJS ?

Question

J'ai un jeu de données d'environ 1000 éléments en mémoire et j'essaie de créer un pager pour ce jeu de données. cet ensemble de données, mais je ne sais pas comment m'y prendre.

J'utilise une fonction de filtre personnalisée pour filtrer les résultats, et cela fonctionne bien, mais j'ai besoin d'obtenir le nombre de pages.

Des indices ?

Answer 1

Angular UI Bootstrap - Directive sur la pagination

Vérifiez Bootstrap UI 's directive de pagination . J'ai fini par l'utiliser plutôt que ce qui est affiché ici, car il a suffisamment de fonctionnalités pour mon utilisation actuelle et a une spécification de test approfondie pour l'accompagner.

Voir

<!-- table here -->

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

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

Contrôleur

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);
  });
});

J'ai fait un plunker de travail pour référence.

---

Version héritée :

Voir

<!-- 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 -->

Contrôleur

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);
  });
});

J'ai fait un plunker de travail pour référence.

Answer 2

J'ai récemment implémenté la pagination pour le site Built with Angular. Vous pouvez consulter la source : https://github.com/angular/builtwith.angularjs.org

J'éviterais d'utiliser un filtre pour séparer les pages. Vous devriez séparer les éléments en pages dans le contrôleur.

Answer 3

J'ai eu à mettre en œuvre la pagination à plusieurs reprises avec Angular, et c'était toujours un peu difficile pour quelque chose qui me semblait pouvoir être simplifié. J'ai utilisé certaines des idées présentées ici et ailleurs pour réaliser un module de pagination qui rend la pagination aussi simple que :

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

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

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

C'est tout. Il a les caractéristiques suivantes :

• Aucun code personnalisé n'est nécessaire dans votre contrôleur pour lier la collection. items aux liens de pagination.
• Vous n'êtes pas obligé d'utiliser un tableau ou un gridview - vous pouvez paginer tout ce que vous pouvez ng-repeat !
• Délégués à ng-repeat Vous pouvez donc utiliser n'importe quelle expression qui pourrait être utilisée de manière valide dans un formulaire de demande d'accès à l'information. ng-repeat y compris le filtrage, la commande, etc.
• Fonctionne sur tous les contrôleurs - le pagination-controls n'a pas besoin de savoir quoi que ce soit sur le contexte dans lequel la directive paginate est appelée.

Démo : http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

Pour ceux qui recherchent une solution "plug and play", je pense que vous trouverez cela utile.

Code

Le code est disponible ici sur GitHub et comprend un bon ensemble de tests :

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

Si vous êtes intéressé, j'ai également écrit un court article qui donne un peu plus de détails sur la conception du module : http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/

Answer 4

Je viens de faire un JSFiddle qui montre la pagination + la recherche + l'ordre par sur chaque colonne en utilisant le code btford : http://jsfiddle.net/SAWsA/11/

Answer 5

J'ai mis à jour Scotty.NET's plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview afin qu'il utilise les nouvelles versions d'angular, angular-ui et bootstrap.

Contrôleur

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();
  };

});

Composant d'interface utilisateur Bootstrap

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