Comment trier et filtrer tous les enregistrements dans AngularJS qui sont paginés en utilisant la pagination UI Bootstrap

Question

Je fais la pagination côté client en utilisant angular ui-bootstrap pagination pour ajouter une pagination à la liste, mais je rencontre un problème selon lequel le tri et le filtrage ne s'appliquent que sur la page en cours.

Voici les extraits de code dans la vue pour afficher les données :

         Éditer
         Voir

    {{reminderType.Name}}
    {{reminderType.EmailTemplate}}

...

et voici les extraits de code dans le contrôleur pour la pagination :

$scope.maxSize = 3;
$scope.totalItems = 7;
$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.numPerPage;
    end = begin + $scope.numPerPage;
    index = $scope.reminderTypes.indexOf(value);
    return (begin <= index && index < end);
};

J'ai également consulté ce lien sur SO, mais ça ne fonctionne pas. Comment faire en sorte que le tri et le filtrage s'appliquent sur toutes les pages ?

J'ai posté le code complet sur plnkr

Answer 1

Par quelque raison, je ne peux pas forker votre plunkr, mais voici une correction. Le JS :

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
  $scope.reminderTypes = [{"ReminderTypeID":1,"Name":"STAMPING OF SPA","EmailTemplate":null},{"ReminderTypeID":2,"Name":"CONDITION PRECEDENT","EmailTemplate":null},{"ReminderTypeID":3,"Name":"STATE AUTHORITY CONSENT","EmailTemplate":null},{"ReminderTypeID":4,"Name":"PAYMENT OF BALANCE PURCHASE PRICE","EmailTemplate":null},{"ReminderTypeID":5,"Name":"CKHT FILING","EmailTemplate":null},{"ReminderTypeID":6,"Name":"TRANSFER FORM 14A","EmailTemplate":null},{"ReminderTypeID":7,"Name":"TRANSFER NOTICE OF ASSESSMENT","EmailTemplate":null}]
  $scope.sortBy = 'Name';
  $scope.sortDescending = false;

  $scope.filteredRT = angular.copy($scope.reminderTypes);

  $scope.searchText = '';

  $scope.maxSize = 3;
  $scope.totalItems = 7;
  $scope.currentPage = 1;
  $scope.numPerPage = 2;
  $scope.paginate = function (value) {
    var begin, end, index;
    begin = ($scope.currentPage - 1) * $scope.numPerPage;
    end = begin + $scope.numPerPage;
    index = $scope.filteredRT.indexOf(value);
    return (begin <= index && index < end);
  };

  $scope.filter = function(){
    var results = $scope.filteredRT;
    results.length = 0;
    var searchText = $scope.searchText;
    var reminderTypes = $scope.reminderTypes;

    for(var i = 0; i < reminderTypes.length; ++i){
      if(searchText.length > 0){
        if(reminderTypes[i].Name.includes(searchText)){
          results.push(reminderTypes[i]);
        }
      } else {
        results.push(reminderTypes[i]);
      }
    }
    $scope.totalItems = results.length;

  }
});

Et le HTML

                        Nom du Type de Rappel

                        Modèle de courriel

                         Modifier
                         Voir

                    {{reminderType.Name}}
                    {{reminderType.EmailTemplate}}

                        Affichage page {{currentPage}} de {{numPages}}

En particulier, j'ai ajouté une directive ngChange dans le filtre d'entrée, et maintenant une copie de reminderTypes est utilisée. Malheureusement, je pense que ce que vous essayez de faire est un peu trop complexe pour fonctionner avec les filtres angulaires seuls. Je n'ai pas testé le tri mais la pagination semble fonctionner correctement de cette façon.

EDIT : juste en ajoutant la fourchette correcte qui répond à la question : https://plnkr.co/edit/HMw8U4OUsW5DNDGfQKHY?p=preview