2017-05-29 18 views
0

私はag-Gridでサーバーサイドページネーションを行いたいと思います。私はグリッドを正常に実装し、初めてページが読み込まれたときに特定のデータを表示しました。私のテーブルには5000以上のレコードがあり、次のボタンを押すたびにグリッド内の次のレコードを取得するためにサーバーを呼び出す必要があります。しかし、別のHTTP要求を行うためにページングイベントを聴く方法はわかりません。私のサーバーは、次/前のボタンをクリックするとヒットしません。ag-Gridサーバーサイドページングイベント

マイ・グリッド・オプション:

this.gridOptions = <GridOptions>{}; 
    this.gridOptions = { 

     enableServerSideSorting: true, 
     enableServerSideFilter: true, 
     enableSorting: true, 
     enableFilter: true, 
     enableColResize: true, 
     rowSelection: 'single', 
     rowDeselection: true, 
     columnDefs: this.columnDefs, 
     rowModelType: 'infinite', 
     paginationPageSize: 35, 
     maxConcurrentDatasourceRequests: 2, 
     infiniteInitialRowCount: 1, 
     getRowNodeId: (item: any) => { 
      return item.id; 
     }, 
     pagination: true, 
     onGridReady:() => { this.gridOptions.api.sizeColumnsToFit(); }, 
     context: { componentParent: this },//to invoke the method of this(parent) component from child component, 
     onRowClicked: (event: any) => { this.router.navigateByUrl(`/dataList/edit/${event.data.id}`); }, 
    }; 

データソースdefination:

let dataSource = { 
     getRows: (params: any) => { 
      setTimeout(() => { 

       let dataAfterSortingAndFiltering = this.sortAndFilter(allOfTheData, params.sortModel, params.filterModel); 
       let rowsThisPage = dataAfterSortingAndFiltering.slice(params.startRow, params.endRow); 
       // if on or after the last page, work out the last row. 
       let lastRow = -1; 
       if (dataAfterSortingAndFiltering.length <= params.endRow) { 
        lastRow = dataAfterSortingAndFiltering.length; 
       } 

       params.successCallback(rowsThisPage, lastRow); 
      }, 500); 
     } 
    }; 
    this.gridOptions.api.setDatasource(dataSource); 

答えて

0

これはAggridドキュメントからです。注:から変更V9.0のAG-グリッドページネーションで

サーバーサイドページネーションをクライアントサイドページネーションに変換します。 v10.1ではサーバーサイドのページネーションが削除されました。 サーバー側のページ付けを行っていた場合は、新しいメカニズムへの移行方法として、無限のスクロールでページネーションに移行することをお勧めします。 データソース内のデータをスライスしてブラウザでのみ行われたページ付けを模倣する場合は、デフォルトのメモリ行モデルを使用し、行データを通常どおりに設定し、次にグリッドプロパティpagination = trueを設定することをお勧めします。

私はあなたがpaginationChangedイベントを聞いて、api呼び出しをしてsetDataを呼び出すことができると思います。

希望します。

関連する問題