有没有办法在 jsGrid 上逐页加载 json 数据？答案

【问题标题】：Is there a way to load json data page by page on jsGrid?有没有办法在 jsGrid 上逐页加载 json 数据？
【发布时间】：2018-05-15 14:16:32
【问题描述】：

我正在使用jsgrid。我正在尝试将 5000 个注册表 JSON 放入网格中，但逐页加载。例如，我不想一次读取所有 5000 个注册表，我将网格设置为按页显示 50 个注册表，并且只想根据需要获取注册表。此刻，我正在分页我的网格，但它总是在读取所有的 json。这是我的控制器代码：

controller: {
loadData: function(filter) {
  var def = $.Deferred();
  $.ajax({
    url: "http://www.json-generator.com/api/json/get/clGvbnRZmG?indent=2", //5000
    //url: "http://www.json-generator.com/api/json/get/cpERCWvHzC?indent=2", //5
    dataType: "json",
    data: filter
  }).done(function(response) {
    var startIndex = (filter.pageIndex - 1) * filter.pageSize;
    var filteredArray = response;

    //if filter is passed
    if (filter.name !== "") {
      filteredArray= $.grep(filteredArray, function(item) {
        return item.name.includes(filter.name);
      });
    } if (filter.age !== undefined) {
      filteredArray= $.grep(filteredArray, function(item) {
        return item.age === filter.age;
      });
    } if (filter.email !== "") {
      filteredArray= $.grep(filteredArray, function(item) {
        return item.email.includes(filter.email);
      });
    } if (filter.gender !== "") {
      filteredArray= $.grep(filteredArray, function(item) {
        return item.gender === filter.gender;
      });
    }

    //if sorting is passed
    if (filter.hasOwnProperty("sortField")) {
      if (filter.sortOrder === "asc") filteredArray.sort(ascPredicateBy(filter.sortField));
      else filteredArray.sort(descPredicateBy(filter.sortField));
    }
    var da = {
      data: filteredArray.slice(startIndex, startIndex + filter.pageSize),
      itemsCount: filteredArray.length
    };
    def.resolve(da);
  });

  return def.promise();
}

如您所见，我使用 slice 来获取要在该页面上显示的对象数组的一部分。

有可能吗？我不知道它是否只是关于 jsgrid 甚至关于 AJAX。我猜使用 AJAX 不可能只返回 JSON 的一部分。

【问题讨论】：

标签： javascript ajax jsgrid

【解决方案1】：

jsGrid 旨在处理分页，您可以删除承诺中的那段代码！

要让jsGrid 处理分页，您需要设置以下内容：

paging: true,
pageLoading: true,
pageSize: 50,

那么您的loadData 控制器将在filter 参数中传递以下属性：

pageSize - 除最后一页外，每页应返回的记录数。
pageIndex - 您的 5,000 条记录的第 n 页。这是由jsGrid 确定的，当用户单击网格上的 > 或 >> 链接或页码链接时。

您需要提供一个合适的网络服务来使用这两个参数来返回正确的页面数据。例如，它可能如下所示：

url: "/api/json/get/clGvbnRZmG/" + filter.pageSize + "/" + filter.pageIndex

并且返回的数据必须是以下形式：

{
  data: [ { ..first item ...}, { ..second item..}, ...],
  itemsCount: n 
}

其中itemsCount是记录总数，即5000。

【讨论】：