Wie die Umsetzung Bootstrap-4 für Eckige 2 ngb-Paginierung

Ich habe eine Angular2 app mit einem component wo ich eine Tabelle.
Die Tabelle wird generiert, über *ngFor Richtlinie.
Jede Zeile der table ist ein Objekt mit 9 Feldern, die geladen wird, aus dem backend, wenn die Komponente initialisiert wird.
In der app, die ich versuche zu verwenden, ng-bootstrap für Winkel-Modul.
ng-boorstrap
Insbesondere bin ich versucht zu implementieren, die pagination Komponente.

Könnte jemand erklären wie man den code so, dass es machen würde z.B. nur 10 Zeilen pro Seite pls? Oder mir einen Hinweis, wo die Umsetzung erfolgt.

Was ich gemacht habe, ist:

  • um die NgbModule Referenz zu meinem Modul, wo ich bin deklarieren meine Komponente sowie die NgbPaginationConfig - Modul (erforderlich für benutzerdefinierte Paginierung)
  • setzen die ngb-pagination code in der Ansicht meine component wie diese 
    <table class="table table-striped">
<thead>
    <tr>
        <th>Tracking #</th>
        <th>Brand</th>
        <th>Geography</th>
        <th>Country</th>
        <th>Contract Name</th>
        <th>Project Name</th>
        <th>Status</th>
        <th>$US BMC</th>
        <th>Release #</th>
        <th id="column-last"></th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let item of viewRows "> 
        <td>{{item.trackingNr}}</td>
        <td>{{item.brand}}</td>
        <td>{{item.geo}}</td>
        <td>{{item.country}}</td>
        <td>{{item.contractName}}</td>
        <td>{{item.projectName}}</td>
        <td>{{item.status}}</td>
        <td>{{item.usBmc}}</td>
        <td>{{item.releaseNr}}</td>
        <td id="column-last">
            <span class="awficon-edit" id="row-icons"></span>
            <span class="awficon-close-2" id="row-icons"></span>
        </td>
    </tr>
</tbody>

Wie die Umsetzung Bootstrap-4 für Eckige 2 ngb-Paginierung

InformationsquelleAutor Jozef Plachy | 2016-12-19

  1. 20

    es ist meine funktionierende Lösung.
    API für ngb-Paginierung: https://ng-bootstrap.github.io/#/components/pagination

        ...
</table>
<ngb-pagination [collectionSize]="totalItems" [pageSize]="itemsPerPage" [(page)]="page" [maxSize]="7" [rotate]="true" (pageChange)="loadPage($event)"></ngb-pagination>

    In der Komponente, die Sie benötigen, manche mögen das. Vergessen Sie nicht, setzen Sie Ihre variable im Konstruktor:

      itemsPerPage: number;
  totalItems: any;
  page: any;
  previousPage: any;

  ...
  loadPage(page: number) {
    if (page !== this.previousPage) {
      this.previousPage = page;
      this.loadData();
    }
  }
  ...

  loadData() {
    this.dataService.query({
      page: this.page - 1,
      size: this.itemsPerPage,
    }).subscribe(
      (res: Response) => this.onSuccess(res.json(), res.headers),
      (res: Response) => this.onError(res.json())
      )
  }
    Die Komponente-Dokumentation fehlen wichtige details, die Sie haben, bedeckt. Danke.
    wie bekommen Sie die Vorherige Seite? Ich sehe den Typ jeder. bin aber fehlen, wo Sie bei der Zuordnung eines Wertes.
    Ich bekomme params in routerResolver, zum Beispiel: resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { const page = route.queryParams['page'] ? route.queryParams['page'] : '1'; const sort = route.queryParams['sort'] ? route.queryParams['sort'] : 'id,asc'; return { page: page }; }
    Ich benutze es für verhindern laden der aktuellen Seite (wenn Benutzer laden 6-Seite und klicken Sie auf 6, werden die Daten neu laden.So ich abonnieren params in constuctor. `` diese.routeData =.activatedRoute.Daten.abonnieren((Daten) => { dies.Seite = data['pagingParams'].Seite; dies.previousPage = data['pagingParams'].Seite; }); ``

    InformationsquelleAutor Игорь Демянюк

  2. 0

    Ok. Ich fand eine wunderbare Lösung in github.
    Überprüfen Sie es heraus.
    https://github.com/michaelbromley/ng2-pagination

    InformationsquelleAutor Jozef Plachy

Schreibe einen Kommentar