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 doc的一條說明：

在v9.0中，ag-Grid分頁從服務器端分頁變為客戶端分頁。 然后在v10.1中刪除了服務器端分頁。 如果您正在進行服務器端分頁，我們建議使用無限滾動作為遷移到新機制的方式進行分頁。 如果您手動切割數據源中的數據以模擬僅在瀏覽器中完成的分頁，我們建議您使用默認的內存行模型並將行數據設置為正常，然后設置grid property pagination = true。

我想你可以聽paginationChanged事件並調用api調用然后調用setData。

希望能幫助到你。