Infinite scrolling

[bputt]

I'm submitting a feature request

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

Current behavior

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior? When pulling data from an API, it'd be beneficial to auto-load the data once the scrollbar is at a certain percentage. The user wouldn't have to click next for separate pages.

Please tell us about your environment:

• Table version: 0.7.x

• Angular version: 2.0.x

• Browser: all

• Language: all

[ychaikin]

Is this not pretty much addressed with this demo? http://swimlane.github.io/ngx-datatable/#virtual-paging

I see there is a demo in the repo: https://github.com/swimlane/ngx-datatable/blob/master/demo/paging/scrolling-server.component.ts

However, the scrolling-server demo perplexes me. It loads the next page not near the end of scrolling (~60%-90% scrolled down), but more like around 10-20% scrolled. Is that demo complete or still considered buggy?

I am personally a bit perplexed by the use of (page) event's offset property that seems to be used as if it's a page number. Is that the intended use of it? It doesn't seem that offset represents the page number. I am kind of confused by that.

[amcdnl]

In response to your questions:

Is this not pretty much addressed with this demo?

We implement virtual scrolling. This is when the scrollbar represents the total height of the content. Infinite scrolling is when the page represents a set fixed number of elements and upon hitting bottom it fetches the next result set injecting those content items into the existing page.

Is that demo complete or still considered buggy?

I would assume the implementation needs some TLC. I am using this style of virtual pagination in my application and not having any issues.

I am personally a bit perplexed by the use of (page) event's offset property that seems to be used as if it's a page number. Is that the intended use of it? It doesn't seem that offset represents the page number. I am kind of confused by that.

Offset is a 0 based number and represents the actual pagination I need to request to the server. The page is a 1 based number that reflects the actual ui position on the page. You can use these exclusive of each other to prefetch pages ahead of the actual page the user is on.

[ychaikin]

Offset is a 0 based number and represents the actual pagination I need to request to the server. The page is a 1 based number that reflects the actual ui position on the page. You can use these exclusive of each other to prefetch pages ahead of the actual page the user is on.

With the event.pageSize=7, the offset changes from 0 to 1 when I scroll down when the 8th row is fully shown. Almost like the description you gave for the ui position on the page instead of what I need to request from the server.

So, what do I look for to know to request the next 7 rows from the server? I can prefetch 14 rows (first 2 pages), but how will I know when the user is getting to close to the last few rows already pre-fetched.

I must admit that I dug into the code and did something slightly drastic to accomplish this. Feels like a leaky abstraction to me, but it works:

<ngx-datatable #table
        ...
        [scrollbarV]="true"
        (page)='onPage($event, table.bodyComponent.indexes)'>

Then, in component code:

currentlyLoadedPage = 0;
onPage(event: any, indexes: any) {
    // not precise, but close enough for now
    const totalShown = (this.currentlyLoadedPage + 1) * this.pageSize;
    const percentScrolled = indexes.last / (totalShown / 100);

    // pre-fetch the next page
    if (percentScrolled > 80) {
      this.currentlyLoadedPage++;
      this.addPage(this.currentlyLoadedPage);
    }
  }

[dinvlad]

Thanks for the tip, I've also sketched up a few thoughts in https://github.com/swimlane/ngx-datatable/pull/740#issuecomment-310806538. We don't have to rely on the hidden datatable API to accomplish this.

[mulgurul]

Hi guys

I noticed that in the demo on a desktop browser, then scrolling using the arrows with a row marked, I get stuck on page 7 when trying to scrool back. Is this by design? So I reach end of data at page 8, and can scroll one page back to top of page seven. If this is a bug, then I can't use this mode in my current project where I need real pageless/infinite scrolling.

Nb I'm using Chrome 84.0.4147.135 64bit on Windows, but I'll do some more testing with mobile device, other browsers etc.

Thanks