AG-Grid SSRM访问最后一页后返回第二页显示空白问题求助

问题现象 #

• 首次加载AG-Grid，正常显示第一页
• 跳转到最后一页，加载正常
• 返回第一页，显示符合预期
• 尝试加载第二页时页面空白

AG-Grid版本：29.3.4

问题原因 #

问题出在ServerSide数据源的getRows回调中，传递给params.success的rowCount参数使用了response.lastRow（当前请求返回数据的最后一行索引），但AG-Grid要求rowCount必须是全量数据的总条数。

当跳转到最后一页后，Grid会将response.lastRow认定为总数据量，此时再请求第二页时，Grid计算出的起始行位置会超出它认为的总行数，因此不会触发有效数据请求，最终显示空白。

解决方案 #

修改getServerSideDatasource函数，在params.success中传入真实的总数据条数，而非当前请求的最后行索引：

1. 在初始化FakeServer时，保存全量数据的总条数
2. 在getRows回调中，将总条数作为rowCount传递给params.success

修改后的代码 #

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import {
  ColDef,
  GridReadyEvent,
  IServerSideDatasource,
  RowModelType,
} from 'ag-grid-community';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { IOlympicData } from './interfaces';

declare var FakeServer: any;

@Component({
  selector: 'my-app',
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine-dark"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowModelType]="rowModelType"
    [pagination]="true"
    [paginationPageSize]="paginationPageSize"
    [cacheBlockSize]="cacheBlockSize"
    [animateRows]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular> `,
})
export class AppComponent {
  public columnDefs: ColDef[] = [
    { field: 'id', maxWidth: 75 },
    { field: 'athlete', minWidth: 190 },
    { field: 'age' },
    { field: 'year' },
    { field: 'gold' },
    { field: 'silver' },
    { field: 'bronze' },
  ];
  public defaultColDef: ColDef = {
    flex: 1,
    minWidth: 90,
    resizable: true,
  };
  public rowModelType: RowModelType = 'serverSide';
  public paginationPageSize = 10;
  public cacheBlockSize = 10;
  public rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<IOlympicData[]>(
        'https://www.ag-grid.com/example-assets/olympic-winners.json'
      )
      .subscribe((data) => {
        // add id to data
        var idSequence = 1;
        data.forEach(function (item: any) {
          item.id = idSequence++;
        });
        // setup the fake server with entire dataset
        var fakeServer = new FakeServer(data);
        // 保存总数据条数
        const totalRowCount = data.length;
        // create datasource with a reference to the fake server and total row count
        var datasource = getServerSideDatasource(fakeServer, totalRowCount);
        // register the datasource with the grid
        params.api!.setServerSideDatasource(datasource);
      });
  }
}

// 新增totalRowCount参数
function getServerSideDatasource(server: any, totalRowCount: number): IServerSideDatasource {
  return {
    getRows: (params) => {
      console.log('[Datasource] - rows requested by grid: ', params.request);
      var response = server.getData(params.request);
      // adding delay to simulate real server call
      setTimeout(function () {
        if (response.success) {
          // call the success callback - 传入总数据条数作为rowCount
          params.success({
            rowData: response.rows,
            rowCount: totalRowCount,
          });
        } else {
          // inform the grid request failed
          params.fail();
        }
      }, 200);
    },
  };
}

关键修改点 #

• 在onGridReady中获取全量数据的总条数totalRowCount，并传递给getServerSideDatasource函数
• 在getRows的params.success中，将rowCount从response.lastRow替换为totalRowCount

修改后AG-Grid就能正确计算分页的总页数和各页的起始位置，不会出现跳转后空白的问题。

内容的提问来源于stack exchange，提问作者Nazir Ahmed