Filtre ne s'affiche pas comme je m'y attendais

Question

J'ai créé un tableau qui affiche des valeurs à partir d'un tableau, auquel j'ai ajouté un filtre. Le tableau est paginé avec un maximum de 5 enregistrements par page.

Le problème survient lorsque j'applique le filtre. Par exemple, si vous effectuez une recherche pour le terme "ora", vous aurez trois enregistrements, un sur chaque page.

Comment afficher ensemble ces résultats (sur une seule page, ou sur autant de pages que nécessaire, mais pas dispersé) et lorsque je retire le filtre pour l'afficher normalement (dans toutes les pages)?

Le code en direct est disponible ici : https://plnkr.co/edit/QIcmQUqABDJcV3H6vqRo?p=preview

HTML:

                Nr. crt.
                Anul
                Denumirea institutiei/companiei

                {{rows.id}}
                {{rows.an}}
                {{rows.den}}

JS:

var app = angular.module("salariesApp", ['ui.bootstrap']);

app.constant("appConst", {
    pagesLimit:             5,
    crrYear:                    2016
});

app.controller('mainCtrl', ['$scope', 'appConst', function($scope, appConst) {  
    $scope.crrYear = appConst.crrYear;

    $scope.pageNum = {
        linkBtnClass: 'linkBtnClass cursor-pointer'
    };

    $scope.showSal = [
        { id: '1', an: '2016', den: 'Oracle Romania' },
        { id: '2', an: '2016', den: 'Microsoft' },
        { id: '3', an: '2016', den: 'Computer Generated Solutions - CGS Europe' },
        { id: '4', an: '2016', den: 'IBM' },
        { id: '5', an: '2016', den: 'Luxoft' },
        { id: '6', an: '2016', den: 'Oracle Romania' },
        { id: '7', an: '2016', den: 'Luxoft' },
        { id: '8', an: '2016', den: 'Computer Generated Solutions - CGS Europe' },
        { id: '9', an: '2016', den: 'IBM' },
        { id: '10', an: '2016', den: 'Luxoft' },
        { id: '11', an: '2016', den: 'Oracle Romania' },
        { id: '12', an: '2016', den: 'Microsoft' },
        { id: '13', an: '2016', den: 'IBM' },
        { id: '14', an: '2016', den: 'Luxoft' }
    ];

    $scope.searchSal = '';

    $scope.sortProperty = $scope.showSal.id;
    $scope.reverse = true;
    $scope.sortBy = function (sortProperty) {
        $scope.reverse = ($scope.sortProperty === sortProperty) ? !$scope.reverse : false;
        $scope.sortProperty = sortProperty;
    };

    // PAGINATION:
    $scope.totalItems = $scope.showSal.length;
    $scope.currentPage = 1;
    $scope.numPerPage = 5;

    $scope.paginate = function(value) {
        var begin, end, index;
        begin = ($scope.currentPage - 1) * $scope.numPerPage;
        end = begin + $scope.numPerPage;
        index = $scope.showSal.indexOf(value);
        return (begin <= index && index < end);
    };

    $scope.getOptionsClass = function (index) {
        if (index > 0) {
            return 'thumbnail nav-option-r';
        } else {
            return 'thumbnail nav-option-l';
        }
    };
}]);

Answer 1

J'ai adapté ceci de ce JSFiddle qui est répertorié sur la page des exemples Angular JSFiddle du wiki. Je n'ai pas réussi à comprendre votre pagination, alors j'ai juste mis des boutons là-bas, mais vous devriez pouvoir extrapoler et appliquer cela à votre fonctionnalité de pagination. En appliquant le filtre qui supprime simplement les éléments du tableau qui ne sont pas affichés sur la page actuelle et en utilisant la pagination avec limitTo, la pagination devient très facile et n'expose pas le comportement que vous observiez où chaque élément s'affichait sur sa propre page.

var app = angular.module("salariesApp", ['ui.bootstrap']);

app.constant("appConst", {
  pagesLimit: 5,
  crrYear: 2016
});

app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

app.controller('mainCtrl', ['$scope', '$filter', 'appConst',
      function($scope, $filter, appConst) {
        $scope.crrYear = appConst.crrYear;

        $scope.pageNum = {
          linkBtnClass: 'linkBtnClass cursor-pointer'
        };

        $scope.showSal = [{ id: '1', an: '2016', den: 'Oracle Romania' }, 
                          { id: '2', an: '2016', den: 'Microsoft' }, 
                          { id: '3', an: '2016', den: 'Computer Generated Solutions - CGS Europe' }, 
                          { id: '4', an: '2016', den: 'IBM' }, 
                          { id: '5', an: '2016', den: 'Luxoft' }, 
                          { id: '6', an: '2016', den: 'Oracle Romania' }, 
                          { id: '7', an: '2016', den: 'Luxoft' }, 
                          { id: '8', an: '2016', den: 'Computer Generated Solutions - CGS Europe' }, 
                          { id: '9', an: '2016', den: 'IBM' }, 
                          { id: '10', an: '2016', den: 'Luxoft' }, 
                          { id: '11', an: '2016', den: 'Oracle Romania' }, 
                          { id: '12', an: '2016', den: 'Microsoft' }, 
                          { id: '13', an: '2016', den: 'IBM' }, 
                          { id: '14', an: '2016', den: 'Luxoft' }];

        $scope.searchSal = {};

        $scope.sortProperty = $scope.showSal.id;
        $scope.reverse = true;
        $scope.sortBy = function(sortProperty) {
          $scope.reverse = ($scope.sortProperty === sortProperty) ? !$scope.reverse : false;
          $scope.sortProperty = sortProperty;
        };

        // PAGINATION:
        $scope.totalItems = ($filter('filter')($scope.showSal, $scope.searchSal)).length;
        $scope.currentPage = 0;
        $scope.numPerPage = 5;

        $scope.totalPages = function() {
          return Math.ceil(($filter('filter')($scope.showSal, $scope.searchSal)).length / $scope.numPerPage);
        };
      }]);

        Nr. crt.
        Anul
        Denumirea institutiei/companiei

        {{rows.id}}
        {{rows.an}}
        {{rows.den}}

  Préc Page {{currentPage + 1}} sur {{totalPages()}} Suiv

Answer 2

J'ai apporté des modifications à votre version en direct pour obtenir ce que vous voulez. Vérifiez le lien suivant : //plnkr.co/edit/TZ1woevPK8uLlbERBtlR?p=preview

La raison pour laquelle votre version ne fonctionne pas est que le filtre ne fait que décider si le modèle répond à la condition MAIS PAS pour modifier le modèle. S'il n'y a pas de modifications apportées au modèle, il n'y aura pas de changements pour la pagination ou la liste des tables.

Donc ce que j'ai fait, c'est simplement créer une copie du modèle d'origine et ajouter un écouteur à cela. Vous pouvez trouver plus d'informations sur le lien plnkr que j'ai attaché ci-dessus.

Answer 3

J'ai résolu le problème en recherchant à partir de la 2ème page avec une condition simple :

app.filter('startFrom', function () {
        return function (input, start, crrPage, totalPages) {
                if (crrPage+1 <= totalPages) {
                    start = +start; //parse to int
                } else {
                    crrPage = 0;
                    start = +crrPage; //parse to int
                }
                return input.slice(start);
        }
});

Et avec cette condition, je parviens à changer la page actuelle en la vraie page actuelle lors de la recherche :

$scope.showCrrPage = function (crrPage) {
    if ((crrPage+1) <= $scope.totalPages()) {
        return $scope.currentPage + 1;
    } else {
        return 1;
    }
}