具有服务器过滤但客户端分页的 Kendo Grid答案

【问题标题】：Kendo Grid with server filtering but client side paging具有服务器过滤但客户端分页的 Kendo Grid
【发布时间】：2019-08-05 12:55:01
【问题描述】：

您好，我有一个启用了服务器过滤的剑道网格，并且由于复杂的 sql 脚本和性能优化，我一次加载所有数据，因此我将 serverPaging 设置为 false。但是，当我单击网格中的下一页按钮或更改页面大小时，我总是向服务器发送新请求并再次加载相同的数据。有没有办法启用服务器过滤并将我的网格设置为进行客户端分页？这是我的网格对象的构造函数参数。

{
    dataSource: {
        serverFiltering: true,
        pageSize: 10,
        transport: {
            read: {
                url: "url",
                dataType: "json",
                type: 'POST',
                contentType: "application/json;charset=UTF-8"
            },
            parameterMap: function (data) {
                return JSON.stringify(data);
            }
         }
    },
    columns[...],
    pageable: {
        pageSizes: [10, 25, 50, 100],
        buttonCount: 3
    }
}

【问题讨论】：

标签： javascript kendo-ui kendo-grid kendo-datasource

【解决方案1】：

一般不建议在服务器和客户端之间分离网格数据操作，详见documentation：

所有数据操作都必须在服务器或客户端上进行。虽然您仍然可以确定部分数据操作将保存在服务器上，部分保存在客户端上，但在其混合数据操作模式下使用 DataSource 会导致不希望的副作用。例如，如果启用serverPaging 而禁用serverFiltering，则DataSource 将仅过滤当前页面中的数据，用户将看到比预期更少的结果。在其他情况下，DataSource 可能会发出比数据操作执行所需更多的请求。

似乎最后一部分适用于您的场景。一种可能的解决方法是将您的transport.read 实现为一个函数，它允许您完全控制如何检索数据。您可以在浏览器中缓存数据，然后重新使用它，使用如下方式：

<script>
var resultCache;
var dataSource = new kendo.data.DataSource({
  serverFiltering: true,
  pageSize: 10,
  transport: {
    read: function(options) {
      if (resultCache != null) {
        options.success(resultCache);
      } else {
        $.ajax({
          url: "url",
          dataType: "json",
          success: function(result) {
            resultCache = result;
            // notify the data source that the request succeeded
            options.success(result);
          },
          error: function(result) {
            // notify the data source that the request failed
            options.error(result);
          }
        });
      }
    }
  }
});
</script>

【讨论】：