代码之家  ›  专栏  ›  技术社区  ›  E.Meir

将超过1米的行加载到涂底漆台

  •  1
  • E.Meir  · 技术社区  · 6 年前

    我正在使用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个页面?

    1 回复  |  直到 6 年前
        1
  •  0
  •   mp92    6 年前

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

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

    如果设置“TotalReRecords=1M”,分页器将设置为1M/10;

    推荐文章