Ag grid 服务器端分页答案

【问题标题】：Ag grid Server side paginationAg grid 服务器端分页
【发布时间】：2018-04-30 12:06:18
【问题描述】：

我正在尝试在 ag-Grid 中实现服务器端分页，每次单击下一个/上一个按钮时都会进行 SOAP 调用。我已经使用特定页码实现了该功能，因此我可以检索我的行数据并将其传递给网格。关于如何做到这一点的任何好例子？提前致谢。

【问题讨论】：

【解决方案1】：

在ag-grid库挖了一整天，终于找到了解决办法。

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

网格选项：

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

GridReady 回调

Grid 准备好后，设置 datasource 例如

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

数据源对象：当您进入下一页时，ag-grid 会调用数据源对象，从而获取数据。

getRows 函数为您提供特定页面的 start 和 end 索引。

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

      })
    }
  }

Example Api Service：这是我使用的一个示例 api 服务

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

我已经在GitHub 上传了这个例子。

【讨论】：

这引导我找到所需的信息（因为我实际上将它与 Vue 一起使用）......谢谢！我注意到一个小错误...您在 cmets 中说 params.startRow 和 endRow 是起始页和结束页，但实际上是“要获取的第一行索引”和“要获取的第一行索引”，如所述在文档中ag-grid.com/javascript-grid-infinite-scrolling/#getrows
谢谢..它对我有用..一天多以来一直卡在同一个地方。 rowModelType: 'infinite' 对我来说是缺少的东西。
我们得到了吗？服务器端的树形数据结构

【解决方案2】：

ag-grid（版本 10 以上）不支持服务器端分页。如果要实现服务端分页，可以使用无限滚动分页https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination&gsc.tab=0

【讨论】：