Syncfusion 数据网格 React 分页不起作用

Question

我在我的应用程序中使用了syncfusion的React Data Grid。使用API，它携带数据并在DataGrid 表中显示数据。但数据网格中的分页不起作用。正常情况下是可以的，当我集成代码时，就不行了。

import * as React from 'react';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
import { GridComponent, ColumnsDirective, ColumnDirective, Edit, Toolbar, ColumnChooser, Page, Inject, Filter, Sort, Resize, Reorder  } from '@syncfusion/ej2-react-grids';

import '/resources/App.css';
import 'bootstrap/dist/css/bootstrap.css';


function Grid() {
  const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
  const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ColumnChooser'];
  const editparams = { params: { popupHeight: '300px' } };
  const validationRule = { required: true };
  const orderidRules = { required: true, number: true };
  const pageSettings = { pageSize: 20, pageSizes: true};


  const dataManager = new DataManager({
    adaptor: new UrlAdaptor,
    insertUrl: "/api/insert",
    removeUrl: "/api/delete",
    updateUrl: "/api/update",
    url: "/api/json"
  });
  return <GridComponent dataSource={dataManager} 
          editSettings={editSettings} 
          toolbar={toolbarOptions} 
          filterSettings={{ type: 'Menu'}}
          pageSettings={pageSettings} allowPaging={true} 
          showColumnChooser={true} allowFiltering={true} allowSorting={true} 
          height={500}>
    <ColumnsDirective>
      <ColumnDirective field='id' headerText='Lead Id' width='100' textAlign="Center" isPrimaryKey={true} ></ColumnDirective>
      <ColumnDirective field='connector_id' headerText='Id Connector' />    
      <ColumnDirective field='first_name' headerText='First Name' editType='textedit' ></ColumnDirective>     
    </ColumnsDirective>
    <Inject services={[Page, Edit, Toolbar, ColumnChooser, Filter, Sort, Resize, Reorder]} />
  </GridComponent>
};
export default Grid;

Answer 1

当使用 dataSource 作为 UrlAdaptor 的 DataManager 实例并执行分页、过滤、排序等操作时，它们需要在服务器端处理。根据您共享的代码，分页似乎已正确启用。您面临的问题似乎与未正确处理分页的 API 请求有关。使用 URL 适配器执行分页时，会使用“skip”和“take”参数生成查询。您需要在服务器端处理和解析此查询，并将要在网格上显示的适当数据返回给客户端。您可以通过下面的 Syncfusion 中的演示 UrlAdaptor API 找到基于您的代码片段的示例：

示例：https://stackblitz.com/edit/react-grid-urladaptor-with-paging

您可以在开发者控制台网络选项卡中执行网格操作（包括分页）时观察发送到 API 的请求：

执行寻呼操作时：