web-dev-qa-db-ja.com

Agグリッドサーバー側のページ付け

私はag-Gridでサーバー側のページ付けを実装しようとしています。ここで、次の/前のボタンをクリックするたびにSOAPを呼び出すようにします。行データを取得してグリッドに渡すための特定のページ番号これを行う方法の良い例はありますか？よろしくお願いします。

angularag-gridag-grid-ng2
9
Steeve

ag-gridライブラリを丸一日掘り進んだ後、ようやく解決策を見つけました。

まず、GridOptionsに次のオプションを含めます。

GridOptions：

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

GridReady CallBack

グリッドの準備ができたら、datasourceを設定します。

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

Data Source Object：dataSourceオブジェクトは、次のページに移動してデータをフェッチするときにag-gridによって呼び出されます。

getRows関数は、startおよびend特定のページのインデックス。

params.successCallback：2つの引数を取ります。最初はページに関連するデータで、2番目はtotalRecords。 Ag-gridは2番目のパラメーターを使用して合計ページ数を決定します。

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 にアップロードしました。

22
Renil Babu

ag-grid（バージョン10以降）はサーバー側のページ付けをサポートしていません。サーバーサイドのページネーションを実装したい場合は、無限スクロールでページネーションを使用できます https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination&gsc.tab=

1
Deepti-l