Is there a way to load json data page by page on j

Question

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

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

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.

Answer 1

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

To let jsGrid handle paging, you set the following:

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

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

• 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.

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 
}

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