加载超过100万行到PrimeNG表

Question

我正在使用PrimeNg表，并试图弄清楚如何使用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.')
  });
}

SQL

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页+显示实际页面数+显示显示记录总数的标签？

Answer 1

我看不到“ totalRecords”变量，但必须进行设置。

如果pageSize为10，并且您要显示10条记录，则分页器将设置为1。

如果您设置“ totalRercords = 1M”，则分页器将设置为1M / 10;