我正在尝试在ag-Grid中实现服务器端分页,每次单击下一个/上一个按钮时我都会进行SOAP调用。我已经使用特定页码实现了该函数,因此我可以检索我的行数据并将其传递给Grid。关于如何做到这一点的任何好例子?提前谢谢。
答案 0 :(得分:6)
整天挖掘 ag-grid 库后,我终于找到了解决方法。
首先让我们在GridOptions中包含以下选项;
GridOptions :
gridOptions: GridOptions = {
pagination: true,
rowModelType: 'infinite',
cacheBlockSize: 20, // you can have your custom page size
paginationPageSize: 20 //pagesize
};
GridReady回叫
准备好网格后,设置一个数据源,例如
onGridReady(params: any) {
this.gridApi = params.api;
this.gridApi.setDatasource(this.dataSource) // replace dataSource with your datasource
}
数据源对象:当您转到下一页时,ag-grid会调用dataSource对象,从而获取数据。
getRows 函数为您提供特定页面的开始和结束索引。
params.successCallback :它带有两个参数,第一个与页面相关的数据,第二个是 totalRecords 。 Ag-grid使用第二个参数来确定总页数。
dataSource: IDatasource = {
getRows: (params: IGetRowsParams) => {
// Use startRow and endRow for sending pagination to Backend
// params.startRow : Start Page
// params.endRow : End Page
//replace this.apiService with your Backend Call that returns an Observable
this.apiService().subscribe(response => {
params.successCallback(
response.data, response.totalRecords
);
})
}
}
示例Api服务:这是我使用的示例api服务
apiService() {
return this.httpclient.get('https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json')
}
我已在GitHub上上传了此示例。
答案 1 :(得分:0)
ag-grid(版本10以后)不支持服务器端分页。如果要实现服务器端分页,可以使用无限滚动分页https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination&gsc.tab=0