javascript - Kendo Grid 具有服务器过滤但客户端分页

Question

您好，我有一个启用了服务器过滤的剑道网格，由于复杂的 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
    }
}

Answer 1

一般不建议将服务器和客户端之间的网格数据操作分开，如 documentation 中详述。 :

All data operations have to occur either on the server or on the client. While you can still determine that part of the data operations will be held on the server and part on the client, using the DataSource in its mixed data-operation mode leads to undesired side effects. For example, if serverPaging is enabled and serverFiltering is disabled, the DataSource will filter only the data from the current page and the user will see less results than expected. In other scenarios, the DataSource might make more requests than necessary for the data operations to execute.

看起来最后一部分适用于您的场景。一种可能的解决方法是将您的 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>