onPageChange event returns different event data (infinite scroll with lazy loading feature?)

Hi, all

In the document document

onPageChange: Triggered when the data-table is paged. Arguments: offset, limit, pageCount

but it returns just page value for now

DataTable.ts onPageChanged(action) { this.state.setPage(action); this.onPageChange.emit(action.value); }

Just wondering, What if we could just make DataTable.ts subscribe event from State Service to match documentation?

DataTable.ts

  ngOnInit(): void {
    const {options, rows, selected} = this;

    this.sub = this.state.onPageChange.subscribe((action) => {
      this.onPageChange.emit(action);
    });

    this.state
      .setOptions(options)
      .setRows(rows)
      .setSelected(selected);
  }

  onPageChanged(action) {
    this.state.setPage(action);
  }

Statets

 setPage({type, value}) {
    if (this.options.offset !== (value - 1)) {
      this.options.offset = value - 1;

      this.onPageChange.emit({
        type,
        offset: this.options.offset,
        limit: this.pageSize,
        count: this.rowCount
      });
    }
  }

and

this might allow angular2-data-table to support infinite scrolling with lazy-loading by emitting “onPageChange” event from “Body.ts” onScroll

Body.ts

 onBodyScroll(props) {
    this.state.offsetY = props.scrollYPos;
    this.state.offsetX = props.scrollXPos;

    this.updatePage(props.direction);
    this.updateRows();
  }

  updatePage(direction) {
    const idxs = this.state.indexes;
    let page = idxs.first / this.state.pageSize;

    if(direction === 'up') {
      page = Math.floor(page);
    } else if(direction === 'down') {
      page = Math.ceil(page);
    }

    if(direction !== undefined && !isNaN(page)) {   
      // pages are offset + 1 ;)
      this.state.setPage({                           <-- emits "onPageChange" event
        type: 'body-event',
        value: page + 1
      });
    }
  }

I currently have angular2-data-table working version of infinite scrolling with lazy-loading (not optimized yet) which also allow pagination at the same time.

any thoughts?

Thanks for the great library 👍 Andy

[zxshinxz]

I somewhat disagree with your point about body scroll not calling page because technically it is paging its just not from a traditional pager. It has to be triggered different though so the offset can be set if its triggered externally ( ie footer pager, outside api, etc ).

That explanation clicked my brain. Thank you for the explanation 😄

Can you paste a link to the code in GH?

I must have mistaken with different source. sorry for the confusion.

[amcdnl]

Check out 0.5.1, I updated my API to return what you were expecting. I do not see that typo, you reference. Can you paste a link to the code in GH?

Yup, I understand infinite vs virtual. Well technically my thought is infinite is when you hit the bottom of the page and loads next and virtual is the whole pane is painted w/ the exact count. You are talking about lazy-loading data based on virtual pagination. Which as far as I know should be supported, I have this in my app so I’ll make a demo to illustrate this.

I somewhat disagree with your point about body scroll not calling page because technically it is paging its just not from a traditional pager. It has to be triggered different though so the offset can be set if its triggered externally ( ie footer pager, outside api, etc ).

Regarding the API suggestions, some thoughts:

• loadAmount: I don’t see this as the decision of the table, you can ask your server for how much ever you need and load them. If you wanna load 2 pages at once ( i do in production ), it doesn’t care.
• distance: This is handled by offset. By loading more data you can have a check that says if that is loaded, no reason to go back.
• maxLoadInCache: not entirely sure why you would need this.