Ag Grid服务器端分页

本文介绍了Ag Grid服务器端分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试在ag-Grid中实现服务器端分页，每次单击下一个/上一个按钮时，我都会进行SOAP调用。我已经用特定的页码实现了该功能，因此我可以检索行数据并将其传递给Grid。有什么好的例子吗？

解决方案

整天挖掘 ag-grid 库后，我终于找到了

首先让我们在GridOptions中包含以下选项；

GridOptions ：

gridOptions：GridOptions = {分页：true， rowModelType：'infinite'， cacheBlockSize：20，//您可以拥有自定义页面大小 paginationPageSize：20 //页面大小};

GridReady CallBack

准备好网格后，设置一个数据源，例如

onGridReady（params：any）{ this.gridApi = params.api; this.gridApi.setDatasource（this.dataSource）//将dataSource替换为数据源}

数据源对象：当转到下一页时，ag-grid调用dataSource对象，从而获取数据。

getRows 函数为您提供特定页面的开始和结束索引。

params.successCallback ：它带有两个参数，第一个与页面相关的数据，第二个是 totalRecords 。 Ag-grid使用第二个参数来确定总页数。

dataSource：IDatasource = { getRows：（参数：IGetRowsParams）=> { //使用startRow和endRow将分页发送到后端 // params.startRow：起始页 // params.endRow：结束页 //将this.apiService替换为可返回Observable 的后端调用this.apiService（）。subscribe（response => { params.successCallback（ response .data，response.totalRecords ）; }）} }

Api服务示例：这是我使用的示例api服务

apiService（）{返回this.httpclient.get（'raw.githubusercontent/ag-grid /ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json'）}

我已在 GitHub 上上传了此示例。

I'm trying to implement a server side pagination in ag-Grid where I'll make a SOAP call each time I click on the next/previous button. I have already implemented the function with the specific page number so I can retrieve my row data and pass it to the Grid. Any good examples on how to do that? Thanks in advance.

解决方案

After digging ag-grid Library for the whole day , I finally found the solution.

First Lets include the following options in our GridOptions;

GridOptions :

gridOptions: GridOptions = { pagination: true, rowModelType: 'infinite', cacheBlockSize: 20, // you can have your custom page size paginationPageSize: 20 //pagesize };

GridReady CallBack

After the Grid is ready, Set a datasource e.g

onGridReady(params: any) { this.gridApi = params.api; this.gridApi.setDatasource(this.dataSource) // replace dataSource with your datasource }

Data Source Object : dataSource object is called by ag-grid when you go to next page and thus fetches data.

getRows functions provides you with start and end index of the particular page.

params.successCallback : It takes two arguments, first the data related to page and second is totalRecords. Ag-grid uses the second parameter to decide total pages.

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

Example Api Service : This is an example api service that i have used

apiService() { return this.httpclient.get('raw.githubusercontent/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json') }

I have uploaded this example on GitHub.