PrimeNg Turbo Table p-table延迟加载滚动事件

时间:2018-05-11 11:28:44

标签: angular primeng primeng-datatable primeng-turbotable

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

<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>

获取lazyload事件的方法。

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
               // 
          }

     }

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

感谢。

1 个答案:

答案 0 :(得分:1)

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