I am trying to implement a lazy load for a large set of data with primeng <p-datatable>
. I have done everything documented on the official site, however I could not make it work.
The onLazyLoad
callback runs only once at the time of loading the table. It doesn't trigger on each scroll as expected.
<div style="max-height:300px; border:1px solid black;overflow-y:auto">
<p-dataTable #pocListref [value]="data" rowHover="true" [(selection)] = "selectedData" scrollable="true" scrollHeight="200px" [rows]="4"
[style]="{'margin-top':'30px'}" [paginator]="true" [rowsPerPageOptions]="[5,10,20]"
[lazy]="true" [totalRecords]="totalRecords" (onLazyLoad)="lazyLoad($event)">
<p-column header="Id">
<ng-template pTemplate="body" let-index="rowIndex">
{{index}}
</ng-template>
</p-column>
<p-column selectionMode="multiple" [style]="{'width':'5%'}"></p-column>
<p-column field="name" header="Name"[sortable]="true"></p-column>
<p-column field="age" header="Age" [sortable]="true"></p-column>
<p-column field="company" header="Company" [sortable]="true"></p-column>
</p-dataTable>
</div>
The same works fine with the paginator implementation. I have noticed that it works with paginator only if I do not use virtualScroll
attribute, which makes sense, but somehow virtualScroll doesn't make any effect on scrolling.
I know there is already a similar question but it is still answered.
Has someone used the virtual scroll successfully with lazy loading. Any suggestions will be useful.
i use the p-table, but i think it is the same way it does the lazyloading as p-datatable. i fix this problem with a trick. i set the totalRecords as a large number or a number much larger than your current data(e.g. the current data's length is 500, set the totalRecords as 1000), then the lazyloading will be triggered on each scroll
Try like this my example :
here is my updated code without paginator and using virtualScroll
component.ts
component.html