web-dev-qa-db-fra.com

Comment afficher les résultats de la pagination en utilisant l'ID de pagination en utilisant ngx-datatable & angular?

Exigence :

Affichage des données dynamiques à l'aide de ngx-datatable et utilisation de la pagination à l'aide de l'ID de page

Description :

J'ai des données dynamiques où je les affiche en utilisant le ngx-datatable dans angular et ici tout fonctionne mais le problème je ne sais pas comment appliquer la pagination en utilisant le page_id (envoyé au serveur) en utilisant le corps du message). Ici, je reçois le page_id avec la réponse de l'API, c'est le premier appel de l'API. Ici, le page_id doit être envoyé en tant que corps pour la même API pour obtenir le reste des résultats.

Ex: Supposons que j'ai 20 résultats dans le premier appel d'API, j'obtiendrai les 10 enregistrements et un identifiant de page en utilisant l'identifiant de la page, comment puis-je obtenir les 10 prochains résultats

Ce que j'ai implémenté:

Obtention des données et affichage dans la table de pagination de base appliquée

Voici mon code:

Result=[];
  reorderable: boolean = true;
  selected = [];
  rows = [];
  columns = [];
  DataArray = [];
  Results = {
    "data": [
      {
        "_score": 0.36464313,
        "_type": "data",
        "_id": "abcd",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcd",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "Dell_laptop"
      },
      {
        "_score": 0.36464314,
        "_type": "data",
        "_id": "abcde",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcde",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "lenovo_laptop"
      },
      {
        "_score": 0.36464314,
        "_type": "data",
        "_id": "abcdef",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcde",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "lenovo_laptop"
      }
    ],
    "total": 4,
    "page_id": "WpNdVJMMjlJVnJTYTFuUklB"
  }



  LoadInfo(){
    this.DataArray = ["filter","information.product_id","information.creation_utctime","enduser"];
    this.rows=[];
    this.Result = this.Results['data'];
// tslint:disable-next-line: forin
    for (var res in this.Result) {
      var row = {};
      for (var key in this.Result[res]['_source']) {
        if (typeof this.Result[res]['_source'][key] === 'object') {
          for (var k in this.Result[res]['_source'][key]) {
            let temp = key + "." + k;
            row[temp] = this.Result[res]['_source'][key][k];
          }
        } else {
          row[key] = this.Result[res]['_source'][key]
        }
        row['_id'] = this.Result[res]['_id'];
      }
      this.rows.Push(row);
    }
    console.log(this.rows);

  }

  onActivate(event) {
    // console.log('Activate Event', event);
  }

  onSelect({ selected }) {
    // console.log('Select Event', selected, this.selected);

    this.selected.splice(0, this.selected.length);
    this.selected.Push(...selected);
  }

Code HTML:

<button type="button" (click)="LoadInfo()">LoadData</button>

 <div>
     <ngx-datatable class="material ui" [rows]="rows" [columnMode]="'force'" [headerHeight]="50"
     [footerHeight]="50" [limit]="2" [rowHeight]="'auto'" [reorderable]="reorderable" [selected]="selected"
     [selectionType]="'checkbox'" [scrollbarH]="true" [sortType]="'multi'" (activate)="onActivate($event)"
    (select)='onSelect($event)'>

    <ngx-datatable-column [width]="30" [sortable]="true" [canAutoResize]="false" [draggable]="false"
    [resizeable]="false" class="uih">
    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
      let-selectFn="selectFn">
      <input type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" />
    </ng-template>
    <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
      let-onCheckboxChangeFn="onCheckboxChangeFn">
      <input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column *ngFor="let attr of DataArray" [sortable]="true" prop={{attr}} name={{attr}}>
  </ngx-datatable-column>

     </ngx-datatable>
</div>

Lien Stackblitz: https://stackblitz.com/edit/angular-secw8

Remarque: même s'il y a pageid également quelques fois après 10 enregistrements, il peut ne pas y avoir plus d'enregistrements également

ici l'appel api est une simple demande de publication

api : https://xxxx.xxxx..com/<some method>
 body: { "key1":"data1","key2":"data2","pageid":"ss"}

ici, dans le premier appel api, nous n'enverrons pas l'ID de page car après avoir appelé le premier appel api, nous obtiendrons une réponse en ce que nous obtiendrons le pageid et pour le deuxième appel api je veux dire pour la pagination, nous devons utiliser le pageid

javascriptangulartypescriptngx-datatable
14
Dexter

Pour la pagination, vous devez connaître le nombre total de pages. Sinon, vous avez besoin du nombre total d'éléments ainsi que du nombre d'éléments par page ( pour dériver le nombre total de pages ). Dans votre cas, vous n'avez qu'un identifiant de page qui ne dit même pas sur quelle page vous vous trouvez. L'identifiant de page vous donne uniquement accès aux éléments de la page suivante.

Cette API est utile si vous implémentez une fonction de défilement infini. Sinon, vous ne pouvez implémenter qu'un bouton plus sur lequel charge les nouveaux éléments à table. Le lien que vous avez fourni dans les commentaires implémente cette fonction de bouton plus.

Vous pouvez donc remplacer le pied de page par défaut de ngx-datatable pour ajouter votre bouton plus pour charger plus d'éléments dans le tableau.

<ngx-datatable-footer>
    <ng-template ngx-datatable-footer-template
        let-rowCount="rowCount"
        let-pageSize="pageSize"
        let-selectedCount="selectedCount"
        let-curPage="curPage"
        let-offset="offset"
        let-isVisible="isVisible">

        <div class="datatable-footer-inner selected-count">
            <div class="page-count" *ngIf="selectedCount">
                <span> {{selectedCount}} selected / </span> {{rowCount}} total
            </div>
            <div class="datatable-pager">
                <ul class="pager">
                    <li class="pages active" role="button" aria-label="next" *ngIf="rowCount">
                        <a href="javascript:void(0)" (click)="LoadInfo()"> Next </a>
                    </li>
                </ul>
            </div>
        </div>

    </ng-template>
</ngx-datatable-footer>

Démo Stackblitz

2
Munim Munna