DevExtreme DataGrid自定义Store无skip/take属性，分页失效如何解决？

你的问题核心是未开启远程分页相关配置，导致DataGrid不会向CustomStore的load函数传递skip和take参数。下面是具体修复步骤与代码调整：

关键修复点 #

1. 给CustomStore添加paginate: true配置
   该配置会告知组件当前为远程分页模式，加载数据时自动传入skip（跳过条数）和take（每页条数）参数。

2. 开启DataGrid的远程分页操作
   设置remoteOperations: { paging: true }，明确告知DataGrid分页逻辑由远程API处理，而非本地对全量数据做分页。

3. 修正totalCount的获取逻辑
   你当前用result.length作为totalCount是错误的——返回的仅为当前页数据，总条数需从API响应元数据中获取（比如TheDogAPI的响应头包含x-total-count字段）。

修改后的完整代码 #

// Configuring API URL
const apiUrl = 'https://api.thedogapi.com/v1/breeds';

// Function to load data using Custom Store
const loadDataSource = (loadOptions) => {
    const { skip, take } = loadOptions;

    console.log({ skip, take }); // 现在能拿到正确数值

    const params = {
        page: Math.floor(skip / take) + 1,
        limit: take,
    };

    console.log(params);

    return fetch(`${apiUrl}?page=${params.page}&limit=${params.limit}`)
        .then(response => {
            // 从响应头获取总条数
            const totalCount = parseInt(response.headers.get('x-total-count'), 10);
            return response.json().then(result => ({
                data: result,
                totalCount: totalCount || result.length // 兼容API返回异常的情况
            }));
        });
};

// Creating a Custom Store for pagination and data loading
const customStore = new DevExpress.data.CustomStore({
    load: loadDataSource,
    paginate: true // 开启远程分页模式
});

const grid = $("#data-grid").dxDataGrid({
    dataSource: customStore,
    columns: ["id", "name"], // 原代码"Product Name"错误，API返回字段为name
    paging: {
        pageSize: 10
    },
    remoteOperations: {
        paging: true // 告知DataGrid使用远程分页
    }
}).dxDataGrid('instance');

额外说明 #

• 原代码列名"Product Name"不符合TheDogAPI返回结构，修改为"name"才能正确显示数据。
• 切换页码时，控制台会输出正确的skip和take值，API请求也会带上对应page和limit参数，实现真正的分页加载。

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