ag-Grid 服务器端分页事件答案

【问题标题】：ag-Grid server side pagination eventsag-Grid 服务器端分页事件
【发布时间】：2018-01-04 06:58:13
【问题描述】：

我想在我的 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);

【问题讨论】：

标签： javascript angularjs typescript pagination ag-grid

【解决方案1】：

这是来自 Aggrid 文档的注释：

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

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

希望对你有帮助。

【讨论】：