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 doc的说明：

在v9.0中，ag-Grid分页从服务器端分页更改为客户端分页。然后在v10.1中删除了服务器端分页。如果您正在进行服务器端分页，我们建议使用无限滚动作为迁移到新机制的方式进行分页。如果您手动切割数据源中的数据以模仿仅在浏览器中完成的分页，我们建议您使用默认的内存行模型并将行数据设置为正常，然后设置grid property pagination = true。

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

希望它有所帮助。

ag-Grid服务器端分页事件

1 个答案: