title: load over 1M rows to PrimeNG table
body: <p>i am using PrimeNg table, and trying to figure how to use the <a href="https://www.primefaces.org/primeng/#/table/lazy" rel="nofollow noreferrer">LazyLoad</a> event, in order to load each time X of rows, </p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;p-table #dt
           [value]="workers"
           [columns]="cols"
           [paginator]="true"
           [rows]="pageSize"
           selectionMode="multiple"
           [lazy]="true"
           (onLazyLoad)="loadLazy($event)"
           [pageLinks]="3"
           [loading]="loading"
           [totalRecords]="totalRecords"
           &gt;
  
    &lt;ng-template pTemplate="caption"&gt;
      &lt;div class="ui-helper-clearfix"&gt;
        &lt;button type="button" pButton iconPos="left" label="All Data" (click)="dt.exportCSV()" style="float:left"&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
      &lt;tr&gt;
        &lt;th *ngFor="let col of cols"&gt;
          {{col.header}}
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-worker&gt;
      &lt;tr&gt;
        &lt;td&gt;{{worker.firstName}}&lt;/td&gt;
        &lt;td&gt;{{worker.lastName}}&lt;/td&gt;
        &lt;td&gt;{{worker.gender}}&lt;/td&gt;
        &lt;td&gt;{{worker.salary | number: '.2'}}&lt;/td&gt;
        &lt;td&gt;{{worker.dateOfBirth}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
  &lt;/p-table&gt;
  </code></pre>
  
  <h2>TS</h2>
  
  <pre><code>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 =&gt; {          
    this.workers = data.slice(first, (first + rows));
    this.loading = false;
      console.log(JSON.stringify(this.workers));
    }, error =&gt; {
      console.log('error:', JSON.stringify(error));
    }, () =&gt; {
      console.log('Completed getting data.')
    });
  }
  </code></pre>
  
  <h2>SQL</h2>
  
  <pre><code>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
  </code></pre>
  
  <p>The are over 1M records exist in "Workers" table and they are arriving fine, </p>
  
  <p>why is the pagination is set to only 1 page? </p>
  
  <p>if i want the real number of pages appear- i then need to load all the rows- thing that will take time, or even "break" the app?</p>
  
  <p>How can I query for x pages on each time the user clicks on page in the pagination + to show the actual number of pages + display a label that show total number of records?</p>