Scroller should work only when we scroll down

yash27

I am using datatables in my angular application with server side processing. I have datatable options as follows

options = {
    sDom: 'rt<"bottom">',
    serverSide: true,
    ajax: (dataTablesParameters: any, callback) => {
      this.http
        .post(
          'https://angular-datatables-demo-server.herokuapp.com/',
          dataTablesParameters, {}
        ).subscribe(( resp : any) => {
          resp = resp.json();
          callback({
            recordsTotal: resp.recordsTotal,
            recordsFiltered: resp.recordsFiltered,
            data: resp.data
          });
        });
    },
    columns: [
      { data: "id" },
      { data: "firstName" },
      { data: "lastName" }
    ],
    scrollY: `calc(100vh - ${$("#header").height() + 85}px)`,
    scroller: { loadingIndicator: true },
  };

It is working fine for me, what my requirement is. Scroller should only do callback when we scroll down. From the starting there will be no data so according to the scrollY value it should get the records at the very first and then it should save the data which we get from the first call. And then whenever we scroll down it should retrieve the data, show it into datatable and store it. Scroller should not do callback when we scroll up.

colin

Hi @yash27 ,

Yep, that's how it behaves. In the example on the website the table is 5,000,000 records long - it wouldn't be possible for a browser to cache that level of information. Likewise, the user can bounce all over the table - it wouldn't be trivial trying to determine which parts had been loaded previously.

Cheers,

Colin

yash27

Ok, I will try to manage the cache anyhow but if possible can I stop ajax call while scrolling up. I mean ajax call should be done only when we scroll down, not when we scroll up.

colin

Hi @yash27 ,

But what would happen if a user drags the scrollbar and jumps down a long way? The ajax call is only made for the visible rows - so there would be gaps. When you then scroll up, that data would be missing, so the Ajax call would be needed.

And likewise, what if ordering is performed, or the user does a search?

I think it would be a hornet's nest to modify that code. It is open-source code though, so feel free to modify to suit your needs.

Cheers,

Colin