web-dev-qa-db-fra.com

Comment ajouter un modèle de pagination et de pied de page dans ngx-datatable?

J'ai le code html suivant,

<ngx-datatable
  class="material"
  [rows]="rows"
  [columns]="[{name:'Name'},{name:'Age'},{name:'Company'}]"
  [columnMode]="'force'"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [externalPaging]="true"
  [count]="page.totalElements"
  [offset]="page.pageNumber"
  [limit]="page.size"
  (page)='getValue($event)'
  [selected]="selected"
  [selectionType]="'checkbox'"
  (activate)="onActivate($event)"
  (select)='onSelect($event)' >
  <ngx-datatable-column
    [width]="30"
    [sortable]="false"
    [canAutoResize]="false"
    [draggable]="false"
    [resizeable]="false"
    [headerCheckboxable]="true"
    [checkboxable]="true">
  </ngx-datatable-column>
    <ngx-datatable-column name="Name">
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
       {{value}}  <i [innerHTML]="row['age']"></i> years old
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Age">
        <ng-template let-column="column" ngx-datatable-header-template>
            Combined Properties
          </ng-template>

        <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
            <div style="border:solid 1px #ddd;margin:5px;padding:3px">
                <div style="background:#999;height:10px" [style.width]="value + '%'"></div>
                {{row['name']}}, passed their life of {{value}}%
              </div>
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Company">
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{value}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-footer>
      <ng-template 
        ngx-datatable-footer-template 
        let-rowCount="rowCount"
        let-pageSize="pageSize"
        let-selectedCount="selectedCount"
        let-curPage="curPage"
        let-offset="offset">
        <div style="padding: 5px 10px">
          <div>
            Rows: {{rowCount}} |
            Size: {{pageSize}} |
            Current: {{curPage}} |
            Offset: {{offset}}  |
            Selected: {{selectedCount}}
          </div>
        </div>
      </ng-template>
    </ngx-datatable-footer>
</ngx-datatable>

qui a le résultat suivant, Pagination du serveur sans pagination

Si je supprime le <ngx-datatable-footer> ... </ngx-datatable-footer> dans le code mentionné ci-dessus, j'ai obtenu le résultat ci-dessous,

Pagination du serveur avec pagination

Je veux avoir le modèle de pagination et de pied de page dans ma table.

Qu'est-ce qui ne va pas dans mon code?

angularpaginationngx-datatable
7
Ragavan Randy

Vous devez ajouter un composant dans votre modèle de pied de page ngx-datatable. Si vous vérifiez le code du composant de pied de page , vous pouvez voir que le pager par défaut n'existe que si le modèle de pied de page n'est pas défini.

Vous pouvez vérifier cette démo pour voir comment ajouter un pager dans un modèle de pied de page personnalisé.

<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="page-count">
        <span *ngIf="selectedMessage">
          {{selectedCount.toLocaleString()}} {{selectedMessage}} / 
        </span>
        {{rowCount.toLocaleString()}} {{totalMessage}}
      </div>
      <datatable-pager
          [pagerLeftArrowIcon]="'datatable-icon-left'"
          [pagerRightArrowIcon]="'datatable-icon-right'"
          [pagerPreviousIcon]="'datatable-icon-prev'"
          [pagerNextIcon]="'datatable-icon-skip'"
          [page]="curPage"
          [size]="pageSize"
          [count]="rowCount"
          [hidden]="!((rowCount / pageSize) > 1)"
          (change)="table.onFooterPage($event)">
      </datatable-pager>
  </ng-template>
</ngx-datatable-footer>
18
Halil İbrahim Karaalp