javascript - 有没有办法在jsGrid上逐页加载json数据？

Question

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

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();
}

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

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

Answer 1

jsGrid 旨在处理分页，您可以删除 Promise 中的那段代码!

要让 jsGrid 处理分页，请设置以下内容:

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

然后您的 loadData Controller 将在 filter 参数中传递以下属性:

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

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

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

返回的数据必须采用以下形式:

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

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