有没有办法在jsGrid上逐页加载json数据? [英] Is there a way to load json data page by page on jsGrid?

问题描述

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

i'm using jsgrid. I'm trying to put a 5000 registries JSON in a grid but loading page by page. For example, i don't want to read all 5000 registries at once, i set grid to show 50 registries by page and want to only get registries as needed. At this moment, i'm paging my grid but it's always reading all the json. Here is my controller code:

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来获取对象数组的一部分以显示在该页面上.

As you can se, i used slice to get part of the array of object to show on that page.

有可能吗?我不知道它是关于 jsgrid 还是关于AJAX.我猜想使用AJAX不可能仅返回JSON的一部分.

Is it possible? I don't know if it's just about jsgrid or even about AJAX. I guess using AJAX it isn't possible to return just part of the JSON.

推荐答案

jsGrid旨在处理分页，您可以在Promise中删除该代码块！

jsGrid is designed to handle paging and you can delete that chunk of code in the promise!

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

To let jsGrid handle paging, you set the following:

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

然后，您的loadData控制器将在filter参数中传递以下属性:

Then your loadData controller will be passed the following properties in the filter parameter:

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

• pageSize - the number of records you should return per page other than the last.
• pageIndex - the nth page of your 5,000 records. This is determined by jsGrid when the user clicks the > or >> link or a page number link on the grid.

您需要提供合适的Web服务来使用这两个参数来返回正确的数据页.例如，可能类似于以下内容:

You need to provide a suitable web service to use these two parameters to return the correct page of data. For example, it could be like the following:

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

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

And the data returned has to be of the form:

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

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

where itemsCount is the total number of records, ie 5000.

这篇关于有没有办法在jsGrid上逐页加载json数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！