ag网格上的客户端分页？

Question

我有 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
        },

Answer 1

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

中

然后您必须对浏览页面的用户做出反应，并在他到达最后一页时更新 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 数组以触发更改检测：

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

Answer 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>

ag网格上的客户端分页？

client side pagination on ag grid?

ag-grid

angular