首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Ag grid Server端分页

Ag grid Server端分页
EN

Stack Overflow用户
提问于 2017-11-17 04:14:39
回答 2查看 26.9K关注 0票数 16

我正在尝试在ag-Grid中实现服务器端分页,每次单击next/previous按钮时都会进行SOAP调用。如何做到这一点有什么好的例子吗?提前谢谢。

EN

回答 2

Stack Overflow用户

发布于 2018-12-14 15:43:59

在钻研了一整天的ag-grid库之后,我终于找到了解决方案。

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

GridOptions

代码语言:javascript
运行
复制
  gridOptions: GridOptions = {
    pagination: true,
    rowModelType: 'infinite',
    cacheBlockSize: 20, // you can have your custom page size
    paginationPageSize: 20 //pagesize
  };

GridReady CallBack

网格准备就绪后,设置一个数据源,例如

代码语言:javascript
运行
复制
onGridReady(params: any) {
    this.gridApi = params.api;
    this.gridApi.setDatasource(this.dataSource) // replace dataSource with your datasource
  } 

数据源对象:当您转到下一页时,dataSource对象由ag-grid调用,从而获取数据。

getRows functions为您提供特定页的startend索引。

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

代码语言:javascript
运行
复制
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服务示例

:这是我使用过的示例服务

代码语言:javascript
运行
复制
apiService() {
    return this.httpclient.get('https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json')
  }

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

票数 31
EN

Stack Overflow用户

发布于 2018-01-17 16:37:25

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

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47338347

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档