Scroll en Table no funciona

Community Discussions in Spanish
Post Reply
eliesperez
Posts: 1
Joined: 18 Oct 2022, 09:38

20 Oct 2022, 10:40

Hola comunidad,

Estoy intentando hacer una tabla que cargue más filas cuando se llegue al final del scroll, pero llega un momento que el scroll deja de enviar bien el evento, por lo que no se hace la llamada al servicio no se da. También he intentado utilizar scrollOptions pero tampoco funciona. Creo que es por el virtualScroll. Os dejo el código que he probado.

Code: Select all

 loadProductsLazy(event: LazyLoadEvent, realEvent: boolean) {
    if(realEvent){
      this.loading = true;
    setTimeout(() => {
      if (!!event.last && this.table.scroller.last >= this.products.length) {
        this.table.scrollTo({bottom: 0});
        this.filtering.pagination.page++;
        this.productService.getList(this.filtering).subscribe((data) => {
          if (data.ok) {
            console.log(this.filtering.pagination);
            this.virtualProducts = data.data;
            this.products = this.products.concat(this.virtualProducts);
          }
        });
        if (!!event.forceUpdate) {
          event.forceUpdate();
        }
      }
    }, Math.random() * 1000 + 250);
    }else{
      console.log('NOT realEvent');
    }
    
    this.loading = false;
  }

Code: Select all

<p-table

        [value]="value"

        [rowTrackBy]="rowTrackBy"

        [dataKey]="dataKey"

        [columns]="columns"

        [scrollable]="true"

        [scrollHeight]="scrollHeight"

        [virtualScroll]="true"

        [virtualScrollItemSize]="50"

        [virtualScrollOptions]="virtualScrollOptions"

        [selectionMode]="selectionMode"

        [(selection)]="selection"

        [metaKeySelection]="false"

        (onEditInit)="onEditInit($event)"

        (onEditComplete)="onEditComplete($event)"

        (onEditCancel)="onEditCancel($event)"

      >
Y la otra opción que he probado:

Code: Select all

public virtualScrollOptions: ScrollerOptions = {

    onScroll: (event: { first: number; last: number }) => {

      this.onScrollComplete(event);

    },

  };

Code: Select all

private onScrollComplete(event: { first: number; last: number }) {

    if (event.last == this.value.length && !this.updatingValueByScrolling) {

      this.updatingValueByScrolling = true;

      this.lastScrollValue = {

        page: this.value.length / this.lastScrollValue.pageSize + 1,

        pageSize: this.lastScrollValue.pageSize,

      };

      this.onScrollCompleteEmitter.emit({

        sort: this.lastSortValue,

        filters: this.lastFilterValues,

        scroll: this.lastScrollValue,

      });

    }

  }
Gracias de antemano <3

Post Reply

Return to “Spanish”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest