web-dev-qa-db-fra.com

Pagination côté serveur Ag Grid

J'essaie d'implémenter une pagination côté serveur dans ag-Grid où je ferai un appel SOAP chaque fois que je clique sur le bouton suivant/précédent. J'ai déjà implémenté la fonction avec le numéro de page spécifique afin que je puisse récupérer mes données de ligne et les transmettre à la grille. De bons exemples sur la façon de le faire? Merci d'avance.

angularag-gridag-grid-ng2
9
Steeve

Après avoir creusé ag-grid Bibliothèque toute la journée, j'ai finalement trouvé la solution.

First Lets inclut les options suivantes dans nos GridOptions;

GridOptions :

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

Rappel GridReady

Une fois la grille prête, définissez une source de données par exemple

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

Objet Data Source : l'objet dataSource est appelé par ag-grid lorsque vous passez à la page suivante et récupère ainsi les données.

Les fonctions getRows vous fournissent start et end index de la page particulière.

params.successCallback : il faut deux arguments, d'abord les données relatives à la page et deuxièmement totalRecords . Ag-grid utilise le deuxième paramètre pour décider du nombre total de 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
        );

      })
    }
  }

Exemple de service api : Ceci est un exemple de service api que j'ai utilisé

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

J'ai téléchargé cet exemple sur GitHub .

22
Renil Babu

ag-grid (à partir de la version 10) ne prend pas en charge la pagination côté serveur. Si vous souhaitez implémenter la pagination côté serveur, vous pouvez utiliser la pagination avec un défilement infini https://www.ag-grid.com/javascript-grid-infinite-scrolling/#pagination&gsc.tab=

1
Deepti-l