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

发布时间：2020-12-17 06:56:14 所属栏目：安全来源：网络整理

导读：我有以下的 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]

我有以下的 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>

有以下结果,
Server Pagination without Paged

如果我删除< ngx-datatable-footer> …< / ngx-datatable-footer>在上面提到的代码中我得到了以下结果,

Server Pagination with Paged

我希望在我的表中包含分页和页脚模板.

我的代码还有什么问题？

解决方法

您必须将组件添加到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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!