在 ngx-datatable 中使用自定义分页或 ngx-pagination答案

【问题标题】：Use custom pagination or ngx-pagination in ngx-datatable在 ngx-datatable 中使用自定义分页或 ngx-pagination
【发布时间】：2021-11-01 14:51:27
【问题描述】：

我有一个角度数据表，我想制作一个自定义分页，可以像图片中所示那样跳转到最后一页。

这是我的页脚的样子

<ngx-datatable-footer>
     <ng-template ngx-datatable-footer-template 
        let-curPage="curPage" 
        let-offset="offset" 
        let-pageSize="pageSize" 
        let-rowCount="rowCount" 
        let-selectedCount="selectedCount">
           <div class="d-flex justify-content-center">
              <pagination-controls 
                  itemsPerPage="pageSize"
                  currentPage="curPage"
                  totalItems="rowCount"
                  directionLinks="true"
                  previousLabel="" 
                  nextLabel="" 
                    (pageChange)="onPage($event)">
              </pagination-controls>
           </div>
         </ng-template>
     </ngx-datatable-footer>

但结果只是这样。

我做错了什么？还是有另一种方法可以像图片所示那样进行分页？谢谢

我的参考here

【问题讨论】：

标签： angular web pagination

【解决方案1】：

根据documentation，你需要把PaginatePipe放在iterable后面。

PaginatePipe 应该放在 NgFor 表达式的末尾。它接受一个参数，一个符合 PaginationInstance 接口。

同时，您不能将值从<ngx-datatable-footer-template> 元素传递到<pagination-control> 元素，因为<pagination-control> 没有itemsPerPage、currentPage 和totalItems 输入属性。

解决方案

您的<ngx-datatable> 和<pagination-control> 元素应如下所示：

.component.html

<ngx-datatable 
    [rows]="rows | paginate: { itemsPerPage: pageSize, currentPage: currentPage, totalItems: rows && rows.length }" 
    ...>

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

        <div class="d-flex justify-content-center">
          <pagination-controls 
              [directionLinks]="true" 
              previousLabel="" 
              nextLabel="" 
              (pageChange)="currentPage = $event">
          </pagination-controls>
        </div>
        
      </ng-template>
    </ngx-datatable-footer>
</ngx-datatable>

.component.ts

currentPage = 1;
pageSize = 10;

Sample Solution on StackBlitz

参考文献

【讨论】：