Kendo Grid服务端分页异常：切换日期筛选后分页传初始筛选值

嘿，我之前也碰到过一模一样的Kendo Grid问题！明明修改日期筛选器后Grid能正常刷新，但切换分页的时候服务端收到的还是最开始的筛选值，折腾了好一会儿才找到症结。下面给你拆解问题和对应的解决办法：

问题根源 #

核心问题在于：当你手动修改筛选器后，Grid的数据源并没有把最新的筛选参数“记住”，分页操作触发的请求还是沿用了初始化时的旧筛选值。Kendo Grid默认不会自动把外部筛选器的实时值同步到分页请求里，得我们手动干预才行。

三种可行的解决办法 #

1. 监听筛选器变化，主动更新数据源的筛选配置 #

给你的两个日期选择器绑定change事件，每次值变化时，直接更新Grid数据源的filter属性。这样后续不管是刷新还是分页，都会用最新的筛选条件：

// 初始化日期筛选器并绑定change事件
$("#startDate").kendoDatePicker({
    change: updateGridFilters
});

$("#endDate").kendoDatePicker({
    change: updateGridFilters
});

function updateGridFilters() {
    const grid = $("#grid").data("kendoGrid");
    const startPicker = $("#startDate").data("kendoDatePicker");
    const endPicker = $("#endDate").data("kendoDatePicker");
    
    // 构造筛选条件
    const filters = [
        { field: "startDate", operator: "gte", value: startPicker.value() },
        { field: "endDate", operator: "lte", value: endPicker.value() }
    ];
    
    // 更新数据源的筛选配置，Grid会自动重新加载数据
    grid.dataSource.filter({ logic: "and", filters });
}

2. 动态生成请求参数，每次请求都拿最新筛选值 #

在数据源的transport.read.data里用函数代替固定对象，这样每次发送请求（包括分页）时，都会实时读取当前筛选器的最新值，从根源上避免旧值缓存：

const dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/your-server-api",
            type: "POST",
            dataType: "json",
            // 用函数动态返回请求参数
            data: () => {
                const startPicker = $("#startDate").data("kendoDatePicker");
                const endPicker = $("#endDate").data("kendoDatePicker");
                
                return {
                    startDate: startPicker.value() ? kendo.toString(startPicker.value(), "yyyy-MM-dd") : null,
                    endDate: endPicker.value() ? kendo.toString(endPicker.value(), "yyyy-MM-dd") : null
                    // 分页、排序这些参数Kendo会自动添加，不用手动写
                };
            }
        }
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true, // 必须开启服务端筛选，否则筛选会在客户端处理
    schema: {
        data: "data", // 对应服务端返回的数据集字段名
        total: "total" // 对应服务端返回的总条数字段名
    }
});

3. 检查Grid的关键配置是否正确 #

别漏掉这两个必要配置，否则前面的操作可能白搭：

• serverFiltering: true：告诉Grid要把筛选参数发送到服务端处理，而不是在客户端过滤数据
• 如果用的是Grid内置的筛选器，还要开启filterable: true

示例Grid配置：

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    dataSource: dataSource,
    serverPaging: true,
    serverFiltering: true,
    filterable: true,
    pageable: true,
    columns: [
        // 你的列配置，比如：
        { field: "startDate", title: "开始日期" },
        { field: "endDate", title: "结束日期" },
        // 其他列...
    ]
});
</script>

验证小技巧 #

改完代码后，打开浏览器开发者工具（按F12），切换到Network标签页：

1. 修改筛选器，看第一次请求的参数里是否有最新的日期值
2. 切换分页，检查新请求的参数，确认日期值是最新的，而不是初始值

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