我正在使用PrimeNg表,并试图弄清楚如何使用LazyLoad事件,以便每次X行都加载
<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>
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条记录,并且可以正常使用
为什么将分页设置为仅1页?
如果我想显示真实的页面数-我则需要加载所有行-需要花费时间,甚至“破坏”应用程序的事情?
每次用户在分页中单击页面时,如何查询x页+显示实际页面数+显示显示记录总数的标签?
答案 0 :(得分:0)
我看不到“ totalRecords”变量,但必须进行设置。
如果pageSize为10,并且您要显示10条记录,则分页器将设置为1。
如果您设置“ totalRercords = 1M”,则分页器将设置为1M / 10;