Kendo 从远程服务获取数据，在本地进行分页

Question

代码：

var url = base_url + "/api/v1/users/getUsers";
var dataSource = new kendo.data.DataSource({
  transport: {
    read: function (options) {
      $.ajax({
          type: 'GET',
          url:url,
          dataType: 'json',
          data: { searchTerm: $("#searchTerm").val().trim() },
          success: function (result) {
          options.success(result);
        },
        error: function (result) {            
          options.error(result);
        }
      });
    }
  },
  schema: {
    data: function (result) {
     return result.model;
    },
    total: function (result) {
      return result.model.length;
    },
  },
  pageSize: 5
});

$("#matches").kendoListView({
  dataSource: dataSource,
  autoBind: false, // if set to false the widget will not bind to the data source during initialization.
  template: kendo.template($("#matchesListViewTemplate").html())
});

$("#pager").kendoPager({
  dataSource: dataSource,
  autoBind: false
});

$(document).keypress(function (e) {
  if (e.which == 13) {
    e.preventDefault();      

    var searchTerm = $("#searchTerm").val().trim();
    if (searchTerm.length < 1)
      return;

    dataSource.read(); 
    dataSource.page(1); // makes another call to the remote service
  }
});

因为数据源是远程的，当我们调用dataSource.page(1)时，kendo再次调用远程服务。 so post:

中描述了这种行为

If you are doing server side paging it should be enough doing grid.dataSource.page(1) since this will invoke the read exactly as you already realized.

我必须更改什么，以便在使用新的 searchTerm 进行搜索后，API 调用将只执行一次，寻呼机将转到第 1 页而无需再次调用？

我试过 dataSource.query() 但还是不行？我希望我表现得足够好。

Answer 1

解决方案是在 dataSource.read() 获取数据/完成时调用 dataSource.page(1)。

$(document).keypress(function (e) {
  if (e.which == 13) {
    e.preventDefault();      

    var searchTerm = $("#searchTerm").val().trim();
    if (searchTerm.length < 1)
      return;

    dataSource.read().done(function() {

      // in case remote service returns empty result set (but still http 200 code)
      // page() makes another request (if data() is empty it makes another request)
      // therefore we must check data length/total
      if( dataSource.total() > 0)
        dataSource.page(1);
    }
});

如果读取请求的响应尚未到达或发生错误，则允许另一个读取请求（以获取数据）。 DataSource.read() 发出异步请求，然后 dataSource.page(1) 开始执行。 DataSource.page(1) 函数检查是否有任何数据读取，如果没有，它会再次执行读取方法 - 因此我们收到了 2 个调用，如您所提到的。因为异步调用可能会发生这种情况。

Kendo 从远程服务获取数据，在本地进行分页

Kendo get data from remote service, do paging locally

kendo-ui

kendo-datasource