我正在使用primering表,并试图找出如何使用
LazyLoad
事件,为了每次加载X行,
HTML格式
<p-table #dt
[value]="workers"
[columns]="cols"
[paginator]="true"
[rows]="pageSize"
selectionMode="multiple"
[lazy]="true"
(onLazyLoad)="loadLazy($event)"
[pageLinks]="3"
[loading]="loading"
[totalRecords]="totalRecords"
>
<ng-template pTemplate="caption">
<div class="ui-helper-clearfix">
<button type="button" pButton iconPos="left" label="All Data" (click)="dt.exportCSV()" style="float:left"></button>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-worker>
<tr>
<td>{{worker.firstName}}</td>
<td>{{worker.lastName}}</td>
<td>{{worker.gender}}</td>
<td>{{worker.salary | number: '.2'}}</td>
<td>{{worker.dateOfBirth}}</td>
</tr>
</ng-template>
</p-table>
TS公司
loadLazy(event: LazyLoadEvent) {
this.loading = true;
//event.first = First row offset
//event.rows = Number of rows per page
var page = (event.first / this.pageSize) + 1;
this.getData(event.first, event.rows)
}
getData(first, rows) {
debugger;
this._srv.getEmployees().subscribe(data => {
this.workers = data.slice(first, (first + rows));
this.loading = false;
console.log(JSON.stringify(this.workers));
}, error => {
console.log('error:', JSON.stringify(error));
}, () => {
console.log('Completed getting data.')
});
}
PROCEDURE [dbo].[Pagination]
-- Add the parameters for the stored procedure here
@pageNumber INT = 1 , -- default to 1
@RowsPerPage INT = 10 -- default to 10
AS
BEGIN
SELECT *
FROM [Workers]
ORDER BY Id
OFFSET ( ( @pageNumber - 1 ) * @RowsPerPage ) ROWS
FETCH NEXT @RowsPerPage ROWS ONLY;
END
超过1M的记录存在于“工人”表中,并且他们到达的很好,
为什么分页设置为只有一页?
如果我想要真正的页面数量出现-然后我需要加载所有行-这将需要时间,甚至“打破”应用程序?
如何在每次用户单击pagination+中的page以显示实际页数+显示显示记录总数的标签时查询x个页面?