Ngx-datatable: Table's (page) emits twice per click on a page of the pagination/pager when implemented as shown in the virtual server scrolling example

[bseiller]

I'm submitting a ...

[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

When using the pager/pagination of a datatable configured for virtual server-side paging
as seen here
http://swimlane.github.io/ngx-datatable/#virtual-paging
https://github.com/swimlane/ngx-datatable/blob/master/demo/paging/paging-virtual.component.ts
the (page) emits twice per click.
Following the simplified stacktraces:

1. call
   DataTableBodyComponent.onFooterPage:6005
   DatatableComponent.html:67
   DataTableFooterComponent.html:32
   DataTablePagerComponent.selectPage:6707
   DataTablePagerComponent.html:23

1. call
   DataTableBodyComponent.onBodyPage:5977
   DatatableComponent.html:47
   DataTableBodyComponent.updatePage:4381
   DataTableBodyComponent.onBodyScroll:4362
   ScrollerComponent.updateOffset:4862
   DataTableBodyComponent.html:21

It could be that the second call is provoked by the modification of the bound page object in setPage in line 54,55 of paging-virtual.component.ts

Expected behavior

Either (page) emits only once during one roundtrip or the example (paging-virtual.component.ts) should be adapted either to contain a note concerning the second call or code that prevents this call to query the service again - this might be similar to the cache, but could rely on the (previously) passed pageinfo object to guard against duplicate calls

Reproduction of the problem
See here for the issue - the calls of 'setPage' are being logged into the console.
http://plnkr.co/edit/hcmOYgExj01h0xKtMqXy?p=preview

What is the motivation / use case for changing the behavior?
Activating virtual server side scrolling resulting in twice as many calls to the server by default could by problematic.

• Table version: 9.3.0
  

• Angular version: 4.1.3/4.2.2
  

• Browser: Chrome 58 | Firefox 49
  

• Language: TypeScript 1.8.10

[crissi]

+1

[thatcort]

I'm seeing the same problem with table version 11.3.2

[thatcort]

I've been investigating and it seems that a scroll event is triggered when clicking on the pagination controls. This causes DataTableBodyComponent's scroll listener to be called, which calls DataTableBodyComponent.updatePage(). This means that a second page change event is called with an offset value of 0. This overrides the value from the user's click on a page button.

Perhaps someone with a better understanding of how scrolling is supposed to work can suggest the best approach for fixing this?

[SaurabhSharma11]

I am facing the same issue (page) event binding is getting executed twice. I am working on version 13.0.1

[ZloDeeV]

I have same issue, but in my case works [virtualization]="false"

[pranavmanole26]

I had same issue.
I adjusted pageSize value so that table will not have vertical scroll. And the issue is resolved.
I found that we should go for either pagination or vertical scrolling as both are used for same purpose of showing/loading more data.

[edjm1971]

@pranavmanole26 Did the problem go away with only implementing paging?
We have a bizarre issue going on but we have scrolling and paging going on which I feel is the wrong approach.

[Hypercubed]

ngx-datatable does not implement any caching. You shoudl keep your own index of loaded data. Watch this page for an updated example: https://github.com/swimlane/ngx-datatable/blob/master/src/app/paging/paging-virtual.component.ts