0

我想把分页放在我的桌子上（我正在使用 Ant Design for Angular），但是分页不起作用。但是当我把它放在底部时它工作正常。

我的代码是这样的：

<nz-table> .....</nz-table>
<nz-pagination> ... </nz-pagination>

这种情况下工作正常，但这种情况下：

<nz-pagination> ... </nz-pagination>
<nz-table> .....</nz-table>

不工作！

（对不起我的英语不好）

4

1 回答 1

2

查看nz-table文档。

与您需要在 HTML 中包含的不同组件相比，看起来实现分页的更简单方法只是您传递给表格的角度组件的一个属性：

<nz-table
      #dynamicTable
      [nzData]="listOfData"
      [nzPaginationPosition]="position"
      [nzFrontPagination]="pagination"
      [nzShowPagination]="pagination"
    >
      <thead>
        <!-- ... -->

因此，要在表格顶部进行分页，请将[nzPaginationPosition]属性设置为top. 查看文档

这些是分页的重要属性：

  • [nzFrontPagination]- BOOLEANfalse -如果要在服务器端对数据进行分页或显示表中的所有数据，是否应将前端的数据分页设置为
  • [nzShowPagination]- BOOLEAN - 是否在表格底部显示分页组件
  • [nzPaginationPosition]- BOOLEAN - 指定分页的位置

所以，在你的情况下：

<nz-table
      #dynamicTable
      [nzData]="listOfData"
      [nzPaginationPosition]="'top'"
      [nzFrontPagination]="false"
      [nzShowPagination]="true"
    >
      <thead>
        <!-- ... -->

更不用说，您可能还想订阅以下事件，以便您可以响应分页（我认为这只需要服务器端分页）：

  • (nzPageIndexChange)- EventEmitter<number>- pageIndex 更改回调
  • (nzPageSizeChange)- EventEmitter<number>- pageSize 改变回调
  • (nzCurrentPageDataChange)- EventEmitter<any[]>- 当前页面数据更改回调

从技术上讲，您可以将分页用作表格中的单独组件。这意味着你需要手动连接nz-table，nz-pagination通过监听分页事件来改变表格，并监听表格事件来改变分页。听起来在您的情况下这不是强制性的，因为您正在尝试实现库支持的某些东西（并且手动方式会复杂得多）。

于 2019-11-14T14:24:00.747 回答