Kendo UI Grid虚拟滚动触发无限Ajax请求且页码不递增问题求助

我之前也碰到过完全一样的坑！开启了服务端分页和虚拟滚动的Kendo Grid，滚动时疯狂调用read方法，而且页码永远卡在1，根本不会递增。结合你给出的数据源配置，主要问题大概率出在这几个地方：

1. 缺少schema.total配置（最常见原因） #

当你开启serverPaging: true时，Kendo Grid必须知道总记录数才能计算总页数和滚动时的分页逻辑。你的配置里只写了schema.data处理函数，完全没定义total，这会让Kendo默认认为总记录数就是当前返回的条数，总页数永远是1——所以滚动时它会一直请求第1页，而且因为虚拟滚动需要填充内容，就会无限触发请求。

修复方法：
在schema里加上total函数，返回后端提供的总记录数字段（比如后端返回的totalCount、totalItems这类字段）：

dataSource: {
  serverPaging: true,
  serverSorting: true,
  serverFiltering: true,
  pageSize: 10,
  transport: {
    read: URL
  },
  schema: {
    data: function(data) {
      /* 你的业务逻辑... */
      return data.items; // 假设后端返回的当前页数据在items字段里
    },
    total: function(data) {
      // 必须返回总记录数，和后端字段对应
      return data.totalCount;
    }
  }
}

2. 虚拟滚动的高度未固定 #

Kendo虚拟滚动依赖固定的网格高度来计算滚动位置和需要加载的页码。如果你的Grid没有设置固定高度，或者高度是动态变化的，Kendo会无法正确判断滚动状态，导致不断触发加载请求。

修复方法：
在Grid的scrollable配置里明确设置固定高度：

<!-- AngularJS里的Kendo Grid示例 -->
<kendo-grid
  k-data-source="yourDataSource"
  k-scrollable="{ virtual: true, height: 500 }" <!-- 这里设置固定高度 -->
  k-columns="yourColumns"
></kendo-grid>

如果需要动态高度，也可以通过AngularJS的指令或者CSS确保高度在滚动时不会频繁变化。

3. 后端返回的分页数据不匹配 #

要确认后端是否正确处理了Kendo传递的page、pageSize参数：

• 确保后端返回的是对应页码的数据（比如page=1返回第1-10条，page=2返回11-20条）
• 确保后端返回的总记录数totalCount是准确的，不是当前页的条数

如果后端返回的数据一直是第1页的内容，Kendo会认为还没加载完，继续请求第1页。

4. schema.data函数破坏了数据结构 #

如果你的data处理函数修改了返回的数据结构，比如返回的数组长度和pageSize严重不符，或者不小心过滤了所有数据，也会导致Kendo的分页逻辑混乱。

检查要点：

• 确保data函数返回的是当前页的完整数据数组，长度和pageSize一致（最后一页可以不足）
• 不要在data函数里修改分页相关的元数据（比如总记录数）

最后验证步骤 #

1. 打开浏览器开发者工具，查看Network面板，确认每次请求的page参数是否有变化（如果还是1，说明前面的问题没解决）
2. 检查后端返回的响应里，总记录数字段是否正确
3. 确认Grid的高度是固定的，滚动时不会动态改变

按照这些步骤排查，应该能解决无限请求第1页的问题！

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