Virtual Server-side Paging demo duplicates rows

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior on every page change, the data will be duplicates

Expected behavior on page change, no data duplication, simply show new data.

Reproduction of the problem

• http://swimlane.github.io/ngx-datatable/#virtual-paging
• sort by name
• change page or scroll down -> every rows are duplicates, do it again, every rows 4x, again 8x

What is the motivation / use case for changing the behavior? I would like to use virtual server-side paging, but the given exemple doesn’t work. I’have to find by myself how to solve it.

Please tell us about your environment: Windows 7, firefox

• Table version: 10.2.3
• Angular version: ?
• Browser: all
• Language: all

[alaingiller]

After some analysis:

1. ‘rows’ (data[]) size must be equals to ‘offset’ (page number) * ‘limit’ (page size)
2. data in ‘rows’ of the current & previous page at least must be correct.
3. data in ‘rows’ cannot be null/undefined but can be {}.
4. setPage is for too often called (with same args)
5. setPage is correctly called when one scroll down but not when one scroll up

So there my solution or workaround to always fetch correct data:

private fetch(): void {
  this.serverResultsService.getResults(this.page).subscribe(pagedData => {
    this.page = pagedData.page;
    this.rows= this.getRows(pagedData );
    if (page.pageNumber > 0) {
      this.page.pageNumber = this.page.pageNumber -1;
      this.serverResultsService.getResults(this.page).subscribe(pagedData2 =>{
        this.rows.splice(pagedData2.pageNumber * pagedData2 .pageSize, pagedData2 .size, ...pagedData2 .data);
      });
      this.page.pageNumber = this.page.pageNumber +1;
    }
  });
}
private getRows(page): object {
  const rows: [] = [...page.data];
  const result = Object.assign({}, page);
  result.data= [];
  result.data[page.pageNumber * page.pageSize] = null;
  result.data.fill(<any>{}, 0, page.pageNumber * page.pageSize);
  result.data.splice(page.pageNumber * page.pageSize, 1, ...rows);
  return result;
}

[Hypercubed]

Watch this page for an update: https://github.com/swimlane/ngx-datatable/blob/master/src/app/paging/paging-virtual.component.ts