首页 > 解决方案 > PrimeNg Turbo Table p-table 延迟加载滚动事件

问题描述

我正在实施 primeNG turbo 表。我能够实现它,但是在实现延迟加载的同时。我无法获得滚动事件。如何在我的方法中获取滚动事件。以下是我尝试过的。

<p-table #dt 
          dataKey="id"
          [columns]="columns" 
          [value]="gridData" 
          [scrollable]="true" 
          sortMode="single"
          scrollHeight="500px" 
          *ngIf="isDataLoading" 
          (onLazyLoad)="loadDataOnScroll($event)" 
          [lazy]="true" 
          [rows]="25" 
          [totalRecords]="recordTotal"
          [(selection)]="selectedRows" 
          (onRowSelect)="onRowSelect($event)" 
          (onRowUnselect)="onRowUnselect($event)" 
          (onHeaderCheckboxToggle)="onHeaderCheckboxToggle($event)"
          selectionMode="multiple"
          [virtualScroll]="true" >

</p-table>

获取延迟加载事件的方法。

loadDataOnScroll1(event: LazyLoadEvent) {

          let firstTime: boolean;
          let onScroll: boolean;
          let onSort: boolean;
          let globalSearch: boolean;

          console.log(event);
          if (event.globalFilter == null && !event.filters.hasOwnProperty('global') &&
               event.hasOwnProperty('sortField') && event.sortField == undefined) {
               firstTime = true;
               console.log('user iscoming for the first time ');
          } else if (event.globalFilter != null && event.globalFilter.length > 0 && event.filters.hasOwnProperty('global') &&
               !event.hasOwnProperty('sortField')) {
               globalSearch = true;
               console.log('user is doing only global search');
          } else if (event.hasOwnProperty('sortField') && event.sortField != undefined && event.globalFilter == null && !event.filters.hasOwnProperty('global')) {
               onSort = true;
               console.log('user is doing sorting');
          } else if (event.hasOwnProperty('sortField') && event.globalFilter != null && event.filters.hasOwnProperty('global')) {
               globalSearch = true;
               onSort = true;
               console.log('user is doing global search along with sort');
          } else {
               console.log('user is doing onscroll so do increment for page number');
               // here we need to take entire event and get all possible values to call
               // get api and update grid data
               // 
          }

     }

我能够获取排序、过滤、全局搜索事件,但我无法获取滚动事件。我想获取事件并调用我的服务来获取分页数据。

谢谢。

标签: angularprimengprimeng-datatableprimeng-turbotable

解决方案


我用一个技巧解决了这个问题。我将totalRecords设置为一个大数字或比您当前数据大得多的数字(例如当前数据的长度为500,将totalRecords设置为1000),然后每次滚动都会触发延迟加载


推荐阅读