IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

Angular JS pagination


Sujet :

AngularJS

Vue hybride

Rhumario Angular JS pagination 04/07/2014, 17h20
Marco46 Quelques remarques : 1-... 07/07/2014, 10h35
Rhumario Merci pour tes conseils,... 09/07/2014, 10h30
drake56 Bonjour, Votre code m'a... 06/02/2015, 10h52
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Développeur Java
    Inscrit en
    Juin 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juin 2014
    Messages : 19
    Par défaut Angular JS pagination
    Bonjour,

    J'aimerais mettre en place une pagination sur un tableau de données mais sans succès...

    Voici le code de ma page html :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
     <table class="table table-striped">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in items | filter:offset | limitTo:itemsPerPage">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
          </tr>
        </tbody>
     
    <tfoot>
          <td colspan="3">
            <div class="pagination">
              <ul>
                <li ng-class="prevPageDisabled()">
                  <a href="" ng-click="prevPage()">&laquo; Prev</a>
                </li>
                <li ng-repeat="n in range()"
                  ng-class="{active: n == currentPage}" ng-click="setPage(n)">
                  <a href="#">{{n+1}}</a>
                </li>
                <li ng-class="nextPageDisabled()">
                  <a href="" ng-click="nextPage()">Next &raquo;</a>
                </li>
              </ul>
            </div>
          </td>
        </tfoot>
      </table>


    Et voici le code JS :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    $scope.itemsPerPage = 10;
    $scope.currentPage = 0;
    $scope.items = [];
     
    for (var i=0; i<30; i++) {
       $scope.items.push({
          id: i, name: "name "+ i, description: "description " + i
       });
    }
     
    $scope.offset = function()  {
       $scope.itemsPerPage = parseInt($scope.itemsPerPage, 10);
       return $scope.currentPage.slice($scope.itemsPerPage);
    };
     
    $scope.prevPage = function() {
       if ($scope.currentPage > 0) {
          $scope.currentPage--;
       }
    };
     
    $scope.prevPageDisabled = function() {
       return $scope.currentPage === 0 ? "disabled" : "";
    };
     
    $scope.pageCount = function() {
       return Math.ceil($scope.items.length/$scope.itemsPerPage)-1;
    };
     
    $scope.nextPage = function() {
       if ($scope.currentPage < $scope.pageCount()) {
          $scope.currentPage++;
       }
    };
     
    $scope.nextPageDisabled = function() {
       return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
    };
    Je pense que le problème viens de mon filtre offset ! Pouvez-vous m'aider, s'il vous plait ? ^^

  2. #2
    Expert confirmé
    Avatar de Marco46
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Août 2005
    Messages
    4 419
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Août 2005
    Messages : 4 419
    Par défaut
    Quelques remarques :

    1- Utilises plunker (ou fiddle ou ce genre d'outils en ligne) pour présenter ce genre de problème.
    2- Je suppose que ton code js c'est un morceau de ton controleur ? On n'écrit pas de logique dans un controleur, on réserve ça aux services. Le scope ne doit pas implémenter des méthodes, c'est la glue entre la vue et le modèle, tu ne dois avoir que des affectations.
    3- Sans exécuter l'exemple difficile de se prononcer mais ton offset est une fonction alors que cela devrait être une variable du scope. La collection items étant alors filtrée en fonction de cette valeur.

    Check la doc.

  3. #3
    Membre averti
    Homme Profil pro
    Développeur Java
    Inscrit en
    Juin 2014
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juin 2014
    Messages : 19
    Par défaut
    Merci pour tes conseils, j'essaye de les appliquer.
    Donc pour les curieux voici le code que j'ai produit.

    J'ai ajouté les différentes page JS pour gérer les filtres services et directives comme ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var App = angular.module('AngularSpringApp', ['AngularSpringApp.filters', 'AngularSpringApp.services', 'AngularSpringApp.directives']);

    j'ai mis en place mon filtre (offset) dans la bonne page AngularSpringApp.filters

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var AppFilters = angular.module('AngularSpringApp.filters', []);
     
    AppFilters.config(['$filterProvider', function ($filterProvider) {
     
        $filterProvider.register('offset', function() {
      	  return function(input, start) {
      	    start = parseInt(start, 10);
      	    return input.slice(start);
      	  };
      	}); 
     
    }]);
    Tout fonctionne parfaitement, j'espere juste que mon taff est correct lol

  4. #4
    Membre éclairé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2009
    Messages
    307
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Avril 2009
    Messages : 307
    Par défaut
    Bonjour,

    Votre code m'a bien aidé mais il manque la partie setPage, si jamais vous passez par là et que vous pouvez l'ajouter ce serait super.

    Merci d'avance

    Bonne journée

Discussions similaires

  1. Pagination : numéroter sous la forme (1/4)
    Par audreyb dans le forum SAP Crystal Reports
    Réponses: 8
    Dernier message: 01/03/2013, 11h59
  2. [VB.NET] Pagination DataGrid (où est l'erreur?)
    Par franculo_caoulene dans le forum ASP.NET
    Réponses: 2
    Dernier message: 25/10/2004, 11h46
  3. [C#] Probleme de pagination dans datagrid
    Par asphareth dans le forum ASP.NET
    Réponses: 2
    Dernier message: 21/07/2004, 11h25
  4. [VB.NET] Pagination DataGrid
    Par sehing dans le forum ASP.NET
    Réponses: 5
    Dernier message: 20/07/2004, 16h28
  5. Réponses: 15
    Dernier message: 20/07/2004, 09h22

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo