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服务器端分页事件

回答

相关问题