Ag Grid服务器端分页 [英] Ag grid Server side pagination

问题描述

我正在尝试在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（'https://raw.githubusercontent.com/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('https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json')
  }

I have uploaded this example on GitHub.

这篇关于Ag Grid服务器端分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！