web-dev-qa-db-fra.com

Comment utiliser l'interface utilisateur Bootstrap Pagination pour une table, générée avec ng-repeat

J'essaie de conserver la pagination dans mon application Angular à l'aide de uib-pagination. Je suis incapable de trouver le moyen approprié de le faire.

HTML

<table id="mytable" class="table table-striped">
  <thead>
    <tr class="table-head">
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in aCandidates">
      <th>
        <div>{{person}}</div>
      </th>
    </tr>
  </tbody>
</table>

Manette

$scope.totalItems = $scope.aCandidates.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 10;

Je suis en mesure de voir la barre de pagination, mais aucune action n'est effectuée avec cela et les données de la table entière sont restituées, même après l'attribution du nombre total d'éléments à 10.

Comment fonctionne exactement la pagination uib et comment sont les données (dans ce cas, aCandidates) est liée à la pagination.

angularjspaginationangular-ui-bootstrap
4
Dinesh Sundaraneedi

La partie qui vous manque est que vous devez avoir une fonction pour extraire les données de la page actuelle de votre tableau entier. J'ai ajouté une fonction appelée setPagingData() pour gérer cela.

Vous pouvez voir cela dans le forked plunker

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

app.controller("MainCtrl", function($scope) {
  var allCandidates =
      ["name1", "name2", "name3", "name4", "name5",
       "name6", "name7", "name8", "name9", "name10",
       "name11", "name12", "name13", "name14", "name15",
       "name16", "name17", "name18", "name19", "name20"
      ];

  $scope.totalItems = allCandidates.length;
  $scope.currentPage = 1;
  $scope.itemsPerPage = 5;

  $scope.$watch("currentPage", function() {
    setPagingData($scope.currentPage);
  });

  function setPagingData(page) {
    var pagedData = allCandidates.slice(
      (page - 1) * $scope.itemsPerPage,
      page * $scope.itemsPerPage
    );
    $scope.aCandidates = pagedData;
  }
});
<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>

<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <table id="mytable" class="table table-striped">
      <thead>
        <tr class="table-head">
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in aCandidates">
          <th>
            <div>{{person}}</div>
          </th>
        </tr>
      </tbody>
    </table>
    <uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
  </div>
</div>

17
jbrown

Pour les versions plus récentes, modifiez le code suivant:

 <ul uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></ul>

La balise <uib-pagination> n'est plus prise en charge. Il doit être donné comme attribut.

3
ilankumaran k ilankumaran k

Si vous utilisez Angular-2, vous pouvez essayer ngx-bootstrap . Il contient un nombre de composants d'amorçage pouvant être intégrés à Angular-2

Après avoir installé ngx-bootstrap, essayez ce qui suit

Votre modèle html | pagination.html

<div class="row">
  <div class="col-xs-12 col-12">
    <pagination [totalItems]="totalItems" [(ngModel)]="currentPage" [maxSize]="maxSize" class="pagination-sm"
                [boundaryLinks]="true"></pagination>
  </div>
 </div>

Votre composant | pagination-composant.ts

import { Component } from '@angular/core';

@Component({
  selector: 'demo-pagination',
  templateUrl: './pagination.html'
})
export class DemoPagination {
  maxSize: number = 5;
  totalItems: number = 175;
  currentPage: number = 1;
  numPages: number = 0;

  pageChanged(event: any): void {
    console.log('Page changed to: ' + event.page);
    console.log('Number items per page: ' + event.itemsPerPage);
  }
}

Cela rendrait comme 

 enter image description here

1
Vino