为什么Ag-grid显示'？ （问号）在使用服务器端渲染时分页？

Question

我正在使用 React Ag 网格服务器端分页。数据加载正确但有时显示“？”分页标记。

但是，如果我单击下一步，它会正确显示。

这是代码：

gridApi?.setServerSideDatasource({
      getRows: (params: IServerSideGetRowsParams) => {
        const { startRow, endRow, sortModel, filterModel } = params.request;
          refetch({
            result: 'ProjectSummary',
            startRow,
            endRow,
            tab: state.tab,
            filtergroup: JSON.stringify(filterModel),
            sortModel: JSON.stringify(sortModel?.length ? sortModel[0] : {}),
          }).then((response) => {
            if (response?.data) {
              const { datarows, total } = JSON.parse(response?.data?.body);
              if (response?.data?.statusCode === '200') {
                params?.success({
                  rowData: datarows,
                  rowCount: total,
                });
              }
            } else {
              params?.fail();
            }
          });
      }

Answer 1

到目前为止，我还没有找到任何直接的方法来解决这个问题，但有一个小窍门。这是解决方案。

定义这个函数：

const setLbLastRowOnPage = () => {
    if (!gridApi) {
      return;
    }
    const lbLastRowOnPageEl = document.querySelector(`[ref=\'lbLastRowOnPage\']`);
    const isLastPage = gridApi.paginationGetTotalPages() === gridApi.paginationGetCurrentPage() + 1;
    const endRow = isLastPage
      ? gridApi.paginationGetRowCount()
      : (gridApi.paginationGetCurrentPage() + 1) * gridApi.paginationGetPageSize();
    if (lbLastRowOnPageEl) {
      lbLastRowOnPageEl.innerHTML = endRow.toString();
    }
  };

现在，在useEffect中调用这个

useEffect(() => {
    setLbLastRowOnPage();
  }, [loading, gridApi]);