无法使用 primeng <p-datatable> 虚拟滚动延迟加载
Unable to use primeng <p-datatable> virtual scroll lazy load
我正在尝试使用 primeng <p-datatable>
为大量数据实现延迟加载。我已经完成了官方网站上记录的所有内容,但是我无法使其正常工作。
onLazyLoad
回调仅在加载 table 时运行一次。它不会按预期在每次滚动时触发。
<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>
同样适用于分页器实现。我注意到它仅在我不使用 virtualScroll
属性时才与分页器一起使用,这是有道理的,但不知何故 virtualScroll 不会对滚动产生任何影响。
我知道已经有类似的question但还是有人回答了。
有没有人用延迟加载成功使用虚拟卷轴。任何建议都会有用。
像这样尝试我的例子:
这是我没有分页和使用虚拟滚动的更新代码
<p-dataTable [value]="resultsArr" scrollable="true" scrollHeight="100px" [rows]="4" virtualScroll="virtualScroll" [style]="{'margin-top':'30px'}" [lazy]="true" [totalRecords]="results.length" (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>
component.ts
export class Component {
private results: Array<any> = []; // have 15+ objects in this array
private resultsArr: Array<any> = [];
constructor() {
this.results = [{
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}]
}
lazyLoad(event: any) {
setTimeout(() => {
if (this.results) {
this.resultsArr = this.results.slice(event.first, (event.first + event.rows));
}
}, 250);
}
}
component.html
<p-dataTable [value]="resultsArr" [lazy]="true" [totalRecords]="results.length" [responsive]="true"
[paginator]="true" (onLazyLoad)="lazyLoad($event)" [rows]="5" [filterDelay]="500"
[rowsPerPageOptions]="[5,10,20]" sortField="first_name" [sortOrder]="1">
<p-column field="id" header="#" [sortable]="true" styleClass="columnId" [filter]="true"></p-column>
<p-column field="first_name" header="First Name" [sortable]="true"></p-column>
<p-column field="last_name" header="Last Name" [sortable]="true"></p-column>
</p-dataTable>
我使用 p-table,但我认为它与 p-datatable 进行延迟加载的方式相同。
我用一个技巧解决了这个问题。我将totalRecords设置为一个很大的数字或者比你当前数据大很多的数字(例如当前数据的长度是500,将totalRecords设置为1000),那么每次滚动都会触发延迟加载
我正在尝试使用 primeng <p-datatable>
为大量数据实现延迟加载。我已经完成了官方网站上记录的所有内容,但是我无法使其正常工作。
onLazyLoad
回调仅在加载 table 时运行一次。它不会按预期在每次滚动时触发。
<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>
同样适用于分页器实现。我注意到它仅在我不使用 virtualScroll
属性时才与分页器一起使用,这是有道理的,但不知何故 virtualScroll 不会对滚动产生任何影响。
我知道已经有类似的question但还是有人回答了。
有没有人用延迟加载成功使用虚拟卷轴。任何建议都会有用。
像这样尝试我的例子:
这是我没有分页和使用虚拟滚动的更新代码
<p-dataTable [value]="resultsArr" scrollable="true" scrollHeight="100px" [rows]="4" virtualScroll="virtualScroll" [style]="{'margin-top':'30px'}" [lazy]="true" [totalRecords]="results.length" (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>
component.ts
export class Component {
private results: Array<any> = []; // have 15+ objects in this array
private resultsArr: Array<any> = [];
constructor() {
this.results = [{
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}, {
name: "david",
age: 26,
company: "XYz Company"
}]
}
lazyLoad(event: any) {
setTimeout(() => {
if (this.results) {
this.resultsArr = this.results.slice(event.first, (event.first + event.rows));
}
}, 250);
}
}
component.html
<p-dataTable [value]="resultsArr" [lazy]="true" [totalRecords]="results.length" [responsive]="true"
[paginator]="true" (onLazyLoad)="lazyLoad($event)" [rows]="5" [filterDelay]="500"
[rowsPerPageOptions]="[5,10,20]" sortField="first_name" [sortOrder]="1">
<p-column field="id" header="#" [sortable]="true" styleClass="columnId" [filter]="true"></p-column>
<p-column field="first_name" header="First Name" [sortable]="true"></p-column>
<p-column field="last_name" header="Last Name" [sortable]="true"></p-column>
</p-dataTable>
我使用 p-table,但我认为它与 p-datatable 进行延迟加载的方式相同。 我用一个技巧解决了这个问题。我将totalRecords设置为一个很大的数字或者比你当前数据大很多的数字(例如当前数据的长度是500,将totalRecords设置为1000),那么每次滚动都会触发延迟加载