ag-Grid服務器端分頁事件

我想在我的ag-Grid中做服務器端分頁。我已成功實施網格並在第一次加載頁面時顯示特定數據。我在表格中有超過5000條記錄，每當我點擊下一個按鈕時，我需要調用服務器來獲取網格中的下一條記錄。但是，我不知道如何監聽分頁事件來創建另一個http請求。點擊下一個/上一個按鈕時，我的服務器不會被擊中。ag-Grid服務器端分頁事件

我的網格選項：

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);

來源

2017-05-29 prparikh

這是Aggrid DOC記：從改變

在9.0 AG-網分頁服務器端分頁到客戶端分頁。然後在v10.1中刪除服務器端分頁。如果你在做服務器端分頁，我們建議移動到無限滾動分頁作爲遷移到新機制的一種方式。如果您手動將數據源中的數據切片爲僅在瀏覽器中模擬分頁，我們建議您使用默認的內存行模型並將行數據設置爲正常，然後設置網格屬性分頁= true。

我認爲你可以聽paginationChanged事件，並使api調用，然後調用setData。

希望它有幫助。

來源

2018-01-03 22:58:13

ag-Grid服務器端分頁事件

回答

相關問題