ag网格上的客户端分页？答案

【问题标题】：client side pagination on ag grid?ag网格上的客户端分页？
【发布时间】：2020-10-02 16:27:20
【问题描述】：

我有 api，我想在其中获取每个通话 50 条记录。但我只想在网格中显示 10 x 10。有什么建议我该怎么做？所以当我再次来到最后一页调用服务并获得下一个 50 时。有什么建议吗？

<ag-grid-angular [rowSelection]="rowSelection" #agGrid style="display: block;width: 100%; height: 300px;" class="ag-fresh" [gridOptions]="gridoptions"
    [rowData]="data.rowData" [pagination]="true" [suppressPaginationPanel]="true" (rowClicked)='onRowClicked($event)' (selectionChanged)='onSelectionChanged($event)' (gridReady)="onGridReady($event)">
</ag-grid-angular>

public gridoptions: GridOptions = {
        'enableSorting': true,
        'enableFilter': true,
        'suppressRowClickSelection': false,
        'groupSelectsChildren': true,
        'debug': false,
        'rowSelection': 'multiple',
        'rowDeselection': true,
        'enableColResize': true,
        'rowGroupPanelShow': 'always',
        'pivotPanelShow': 'always',
        'enableRangeSelection': true,
        'animateRows': true,
        'paginationAutoPageSize': false,
        'paginationPageSize' : 11,
        'columnDefs': [],
        'pagination': false,
        'defaultColDef': {
            'editable': true,
            'enableRowGroup': true,
            'enablePivot': true,
            'enableValue': true
        },

【问题讨论】：

我不确定我的示例可以使用什么代码
顺便说一句，您的代码中同时包含 'pagination': false, 和 [pagination]="true"

标签： angular ag-grid

【解决方案1】：

好吧，别管我的评论了。我会给你一个完整的答案。所以你想要做的是在你的应用程序的某个地方手动保存和更新rowData。在初始化组件时，您必须获取第一个数据块。因此，您可以简单地将调用放在ngOnInit() {...} 中的 httpClient（或触发它的操作，如果您使用 Redux）。

然后您必须对浏览页面的用户做出反应，并在他到达最后一页时更新rowData（同样，通过调用 httpClient）。

所以在你的 gridOptions 中定义：

paginationChanged(event: PaginationChangedEvent) => {
    if (event.newPage) {
        const currentPage: number = gridOptions.api.paginationGetCurrentPage();
        if (this.data.rowData.length <= (currentPage * 10)) {
            // fetch again
        }
    }
}

确保更新整个 data 对象，而不是仅仅将新项目推送到 rowData-array 以触发更改检测：

rowData = [...oldRowData, ...newChunk];

【讨论】：

【解决方案2】：

我希望在我的情况下 angular 可以帮助你，你可以在 .html 中添加 [pagination]="true 和 [paginationPageSize]=10

<ag-grid-angular 
     [rowSelection]="rowSelection" 
     #agGrid 
     style="display: block;width: 100%; height: 300px;" class="ag-fresh" 
     [gridOptions]="gridoptions"
     [rowData]="data.rowData" 
     [pagination]="true" 
     [suppressPaginationPanel]="true" 
     (rowClicked)='onRowClicked($event)' 
     (selectionChanged)='onSelectionChanged($event)' 
     (gridReady)="onGridReady($event)">

     [pagination]="true"
     [paginationPageSize]=10

</ag-grid-angular>

【讨论】：