如何在 ngx-datatable 中添加分页和页脚模板？

Posted 2023-03-10

【中文标题】如何在 ngx-datatable 中添加分页和页脚模板？

【英文标题】：How to add pagination and footer template in ngx-datatable?

【发布时间】：2018-03-02 10:06:03

【问题描述】：

我有以下 html 代码，

<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>

具有以下结果， 没有分页的服务器分页

如果我删除上述代码中的<ngx-datatable-footer> ... </ngx-datatable-footer>，我会得到以下结果，

使用分页的服务器分页 我想在我的表格中同时拥有分页和页脚模板。

我的代码还有什么问题？

【参考方案1】：

您必须将组件添加到您的 ngx-datatable-footer-template 中。 如果您check the code of footer component，您可以看到只有在未定义页脚模板时才存在默认分页器。

You can check this demo 了解如何在自定义页脚模板中添加分页器。

<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>

【讨论】：

客户端分页怎么样，如何处理？还将其抛出 table 为未定义。

对不起，我没有使用客户端分页。

@PankajPrakash 只需将#table 添加到<ngx-datatable> 容器中。我还需要在selectedMessage 和totalMesage 之前添加table.messages. 然后常规分页再次起作用。