javascript - ag-Grid 服务器端分页事件

Question

我想在我的 ag-Grid 中进行服务器端分页。我已经成功实现了网格并在第一次页面加载时显示特定数据。我的表中有超过 5000 条记录，每次点击下一步按钮时，我都需要调用服务器来获取网格中的下一条记录。但是，我不知道如何监听分页事件以发出另一个 http 请求。当我单击下一个/上一个按钮时，我的服务器不会受到攻击。

我的网格选项:

this.gridOptions = <GridOptions>{};
    this.gridOptions = {

        enableServerSideSorting: true,
        enableServerSideFilter: true,
        enableSorting: true,
        enableFilter: true,
        enableColResize: true,
        rowSelection: 'single',
        rowDeselection: true,
        columnDefs: this.columnDefs,
        rowModelType: 'infinite',
        paginationPageSize: 35,
        maxConcurrentDatasourceRequests: 2,
        infiniteInitialRowCount: 1,
        getRowNodeId: (item: any) => {
            return item.id;
        },
        pagination: true,
        onGridReady: () => { this.gridOptions.api.sizeColumnsToFit(); },
        context: { componentParent: this },//to invoke the method of this(parent) component from child component,
        onRowClicked: (event: any) => { this.router.navigateByUrl(`/dataList/edit/${event.data.id}`); },
    };

数据源定义:

let dataSource = {
        getRows: (params: any) => {
            setTimeout(() => {

                let dataAfterSortingAndFiltering = this.sortAndFilter(allOfTheData, params.sortModel, params.filterModel);
                let rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow);
                // if on or after the last page, work out the last row.
                let lastRow = -1;
                if (dataAfterSortingAndFiltering.length <= params.endRow) {
                    lastRow = dataAfterSortingAndFiltering.length;
                }

                params.successCallback(rowsThisPage, lastRow);
            }, 500);
        }
    };
    this.gridOptions.api.setDatasource(dataSource);

Answer 1

这是 Aggrid 文档的注释:

In v9.0 ag-Grid pagination changed from server side pagination to client side pagination. Server side pagination was then removed in v10.1. If you were doing server side pagination, we recommend moving to pagination with infinite scrolling as a way of migration to the new mechanism. If you were slicing manually the data in your Datasource to mimic pagination done in the browser only, we recommend that you use the default In Memory Row Model and set the row data as normal and then set grid property pagination=true.

我认为你可以监听 paginationChanged 事件并进行 api 调用，然后调用 setData。

希望有帮助。