question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

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

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

6reactions
zlodeevcommented, Sep 15, 2018

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

0reactions
Hypercubedcommented, Apr 20, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Two Scrolls Appearing on primeng table page
So basically the table scroll would turn into the main page scroll at the side of the page? Instead of having two?
Read more >
Bootstrap 4 table scroll - examples & tutorial.
Bootstrap table scroll functionality works vertically (y axis) and horizontally (x axis). You can use it as an alternative for the pagination.
Read more >
Pagination vs. Infinite Scroll: What's the Difference?
Infinite scrolling allows you to continuously scroll through content in its entirety from just one single webpage. Once the scroll bar reaches ...
Read more >
Using Python and Selenium to Scrape Infinite Scroll Web ...
The following code shows how to implement the auto-scrolling feature in Selenium: Selenium can execute Javascript in the console of the web page...
Read more >
17 stunning parallax scrolling websites
These examples show how parallax scrolling websites should be done. ... on a page for longer – great for SEO – and to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found