web-dev-qa-db-fra.com

pagination ui-bootstrap réinitialisation de la page actuelle lors de l'initialisation

J'utilise la directive de pagination de la bibliothèque ui-bootstrap (angular-bootstrap). J'ai un problème lors de son initialisation. Mon problème se produit lorsque je navigue vers une page spécifique via l'URL.

Ce qui se passe, c'est que mon contrôleur s'initialise avec la bonne page de $ stateParams, puis la directive de pagination initialise et déclenche la fonction ng-change qui réinitialise la page à 1. Maintenant que la page de sélection n'est plus utilisée, y a-t-il un moyen de capturer uniquement les clics des utilisateurs pour modifier la page? Idéalement, je voudrais que la directive s'initialise avant le contrôleur afin que ma page ne soit pas réinitialisée. Merci d'avance.

Je peux inclure du code si nécessaire, mais je pense que ma question ne nécessite pas nécessairement un bloc de code.

angularjspaginationangular-ui-bootstrap
39
pcgilday

J'ai donc trouvé une solution après avoir exploré le code de démarrage angulaire. Leur code a une surveillance sur totalPages qui vérifie si la page actuelle est supérieure à la valeur totalPages.

code bootstrap angulaire:

if ( $scope.page > value ) {
  $scope.selectPage(value);
} else {
  ngModelCtrl.$render();
}

Ce qui se passait, c'était si je rafraîchissais la page de la page 3 (par exemple), mon contrôleur rechargeait temporairement les éléments de cette page, provoquant le total des éléments à 0 et le total des pages à calculer comme 1. Cela a déclenché la montre et le code ci-dessus.

Ma solution était de charger les éléments dans la résolution d'état afin que le total des éléments (et à son tour totalPages) soit toujours précis.

44
pcgilday

Si vous ne souhaitez pas utiliser l'état pour résoudre les données, vous pouvez simplement ajouter un ng-if directive sur paginator. En supposant $scope.total_count est utilisé pour se lier à total-items attribut, vous pouvez faire quelque chose comme ceci:

<pagination data-ng-if="total_count"
            total-items="total_count"
            ng-model="applied_filters.page"
            max-size="maxSize"
            class="pagination-sm"
            boundary-links="true"
            rotate="false"
            class="nomargin"
            num-pages="numPages"></pagination>

De cette façon, la directive est toujours initialisée lorsque vous avez le nombre total du serveur et currentPage ne sera pas supérieur à totalPages

39
Mudassir Ali

Le ng-if la directive n'a pas fonctionné pour moi comme prévu (je n'ai pas utilisé la syntaxe controllerAs): la pagination n'a pas pu mettre à jour la $scope.currentPage variable plus. La solution consistait à utiliser ng-model="$parent.currentPage" au lieu de ng-model="currentPage".

<uib-pagination ng-if="totalItems"
                total-items="totalItems"
                items-per-page="itemsPerPage"
                ng-model="$parent.currentPage">
</uib-pagination>
8
theluckyluke

J'ai trouvé une solution à ce problème à partir de Github et j'ai implémenté et travaillé parfaitement.

Comme mentionné dans d'autres réponses également, le problème est avec totalItems et lorsque j'essaie de passer à la page 2/3/n, totalItems devient 0 pendant un moment et dans le processus, currentPage la valeur devient 1 et je ne peux pas passer à la page souhaitée. Donc mon astuce est, avant d'appeler les données du serveur, je viens de définir un plus grand nombre comme totalItems et après avoir reçu les données du serveur, je mets à jour totalItems.

$scope.totalItems = 1000;
QuotationService.getQuotations(url).then(function ( response ) {

     $scope.totalItems = response.data.total;
     $scope.quotations = response.data.data;
     $scope.isTableLoading = false;

});

À mon avis, seulement si isTableLoading est false, j'affiche la pagination, sinon la pagination affichera un nombre incorrect de pages.

<div class="text-center" ng-show="isTableLoading == false">
     <uib-pagination boundary-links="true"  
           total-items="totalItems"
           items-per-page="15" max-size="15" ng-model="currentPage"
           class="pagination-sm" previous-text="&lsaquo;"
           next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;">
     </uib-pagination>
</div>

Maintenant, tout fonctionne parfaitement.

1
Ariful Haque

Une alternative à la résolution d'état serait de définir le total des éléments dans un module de valeur une fois connu. Même chose, en fait, je voulais juste commenter votre réponse ci-dessus, mais je n'avais pas les points nécessaires. Merci pour l'explication, m'a aidé!

0
Housty

Si vous cherchez à définir la page lors du chargement de la page, alors chargez simplement le modèle comme il est décrit ici.

Depuis le site Web:

<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()">
</pagination>

Je suis sûr que vous avez déjà regardé là-bas, donc si le modèle n'est pas configuré correctement lors de l'initialisation du contrôleur, vous aurez évidemment des problèmes. Il y a aussi le cas où il est peut-être écrasé dans un autre endroit où vous utilisez $scope.currentPage. Bien que vous puissiez penser que c'est plus facile sans code, je suggère de publier le code HTML et le contrôleur Angular auquel vous faites référence. J'espère que cela vous aidera!

0
TommyMac