Question

我想将分页放在桌子上（我正在使用Ant Design for Angular），但是分页不起作用。但是，当我将其放在底部时，效果很好。

我的代码是这样的：

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

这种情况很好但是这种情况：

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

不起作用！

（对不起我的英语不好）

Answer 1

Check out the nz-table documentation。

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

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

因此，要将分页放在表格顶部，请将[nzPaginationPosition]属性设置为top。 See the docs

这些是分页的重要属性：

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

所以，就您而言：

<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 改变分页。听起来在您的情况下这不是强制性的，因为您正在尝试实现库支持的内容（并且手动方式会更加复杂）。

如果这有帮助，请标记为正确答案：-）

ng Ant Design：在表顶部的服务器分页不起作用

1 个答案: