时间戳

首页 > 解决方案 > 将超过 1M 行加载到 PrimeNG 表

sql-server - 将超过 1M 行加载到 PrimeNG 表

问题描述

我正在使用 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

“工人”表中存在超过 100 万条记录，并且它们到达正常，

为什么分页设置为只有一页？

如果我想要显示真实的页面数量——然后我需要加载所有行——这需要时间，甚至“破坏”应用程序？

每次用户单击分页中的页面+显示实际页数+显示显示记录总数的标签时，如何查询x页？

标签： sql-serverangularangular6primeng

解决方案

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

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

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

推荐阅读