Kendo Grid数据正常显示但分页器提示‘无数据可显示’且无法分页的问题求助

我一眼就看到几个可能导致分页器异常的问题，咱们一个个来梳理：

1. Model ID字段配置不匹配（最关键的问题） #

你在schema.model里把主键设置成了id: "catalogID"，但接口返回的数据里，主键字段明明是id！Kendo Grid依赖正确的ID字段来识别数据条目、计算分页逻辑，这个不匹配会直接导致分页器无法正确识别总数据量，进而出现"无数据可显示"的错误提示，同时页码导航也会失效。

修复方法：把model的id改成实际返回的字段名"id"：

model: {
    id: "id", // 这里从"catalogID"改为"id"
    fields: {
        id: {type: "number"},
        name: {type: "string"},
        component: {type: "string"}
    }
}

2. 重复的pageable配置 #

你在catalogGridOptions里先后定义了两次pageable：

pageable: true, // 第一次定义
// ... 中间代码 ...
pageable: {
    pageSize: 25,
    numeric: true,
    refresh: true
}, // 第二次完整配置

虽然JavaScript中后面的配置会覆盖前面的，但这种重复写法容易造成混淆，也可能在某些场景下引发意外问题，建议直接移除第一个pageable: true，只保留完整的分页配置对象。

3. GET请求不必要的contentType设置 #

你的transport.read里设置了contentType: "application/json"，但GET请求本身没有请求体，这个设置是多余的，甚至可能导致后端在解析请求时出现潜在问题（虽然你现在数据能显示，但还是建议移除）：

read: {
    url: "/gliese/read",
    type: "GET"
    // 移除 contentType: "application/json"
}

修复后的完整配置示例 #

$(document).ready(function() { $("#catalogGrid2").kendoGrid(catalogGridOptions); });
let catalogGridOptions = {
    dataSource: {
        serverPaging: true,
        transport: {
            read: {
                url: "/gliese/read",
                type: "GET"
            }
        },
        schema: {
            data: "data",
            total: "total",
            model: {
                id: "id",
                fields: {
                    id: {type: "number"},
                    name: {type: "string"},
                    component: {type: "string"}
                }
            }
        },
    },
    pageable: {
        pageSize: 25,
        numeric: true,
        refresh: true
    },
    columns: [
        { field: "id", hidden: true },
        { field: "name", title: "Name", width: 150 },
        { field: "component", title: "Component", width: 75 }
    ],
};

先把第一个ID字段的问题修复，应该就能解决分页器的核心问题了，剩下的优化项可以进一步提升配置的健壮性。

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