In PrimeNG Data Table Load data From Database With Pagination

Question

In an Angular 8 project using PrimeNG DataTable, I would like to make my paging server side. So I want to load only 10 records at a time rather than loading all 10000+ records at a time. Every time page changes 10 records to be load from the database.

PS: Any solutions with example will be helpful.

Need an event to load 10 records from database containing 10000+ records in it.
And it needs to be displayed in a data table with pagination. Every time page changes next 10 records to be load in table.

Answer 1

p-datatable is no longer supported. I'm using Angular 15 and RxJs 7.8.

Your looking for lazy-loading option. This is p-table sample:

<div class='container nsg-content'>
  <p-table id='notetypes-grid' [value]='notetypes' class='nsg-datatable'
      dataKey='NoteTypeId' [totalRecords]='totalRecords' editMode='row'
      [rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'
      [lazy]='true' (onLazyLoad)='getNoteTypesLazy($event)' [loading]='loading'>
    <ng-template pTemplate='caption'>
      <h4 class='nsg-text-center nsg-primary-color'>NoteTypes</h4>
    </ng-template>
    <ng-template pTemplate='header'>
      <tr>
        <th style='width: 45px;'></th>
        <th style='width: 65px;'>
          <button (click)='addItemClicked( )' pButton type='button' icon='pi pi-plus' class='p-button-primary' [disabled]='!editable'></button>
        </th>
        <th style='width: 80px;' [pSortableColumn]='"NoteTypeId"'>
          Note Type Id
          <p-sortIcon [field]='"NoteTypeId"'></p-sortIcon>
        </th>
        <th style='width: 82px;' [pSortableColumn]='"NoteTypeShortDesc"'>
          Note Type Short Desc
          <p-sortIcon [field]='"NoteTypeShortDesc"'></p-sortIcon>
        </th>
        <th style='width: 250px;' [pSortableColumn]='"NoteTypeDesc"'>
          Note Type Desc
          <p-sortIcon [field]='"NoteTypeDesc"'></p-sortIcon>
        </th>
        <th style='width: 98px;' [pSortableColumn]='"NoteTypeClientScript"'>
          Note Type Client Script
          <p-sortIcon [field]='"NoteTypeClientScript"'></p-sortIcon>
        </th>
        <th style='width: 65px;'></th>
      </tr>
    </ng-template>
    <ng-template pTemplate='body' let-rowData let-columns='columns' let-expanded='expanded'>
      <tr>
        <td>
          <a href='#' [pRowToggler]='rowData'>
            <i [ngClass]='expanded ? "pi pi-fw pi-chevron-circle-down" : "pi pi-pw pi-chevron-circle-right"' style='font-size: 1.25em'></i>
          </a>
        </td>
        <td>
          <button (click)='editItemClicked( rowData )' pButton type='button' icon='pi pi-pencil' class='p-button-primary'></button>
        </td>
        <td>
          <span class='p-column-title'>Note Type Id</span>
          {{rowData.NoteTypeId}}
        </td>
        <td>
          <span class='p-column-title'>Note Type Short Desc</span>
          {{rowData.NoteTypeShortDesc}}
        </td>
        <td>
          <span class='p-column-title'>Note Type Desc</span>
          {{rowData.NoteTypeDesc}}
        </td>
        <td>
          <span class='p-column-title'>Note Type Client Script</span>
          {{rowData.NoteTypeClientScript}}
        </td>
        <td>
          <button (click)='deleteItemClicked( rowData )' pButton type='button' icon='pi pi-trash' class='p-button-danger' [disabled]='!editable'></button>
        </td>
      </tr>
    </ng-template>
    <ng-template let-notetype pTemplate='rowexpansion'>
      <tr><td [attr.colspan]='7'>
        <div>
            <div class='row'>
              <div class='col-lg-2 col-md-3 col-sm-12 nsg-primary-color nsg-text-right'><label for='NoteTypeId'>Note Type Id:&nbsp;</label></div>
              <div class='col-lg-auto col-md-auto col-sm-12' id='NoteTypeId'>{{notetype.NoteTypeId}}</div>
            </div>
            <div class='row'>
              <div class='col-lg-2 col-md-3 col-sm-12 nsg-primary-color nsg-text-right'><label for='NoteTypeShortDesc'>Note Type Short Desc:&nbsp;</label></div>
              <div class='col-lg-auto col-md-auto col-sm-12' id='NoteTypeShortDesc'>{{notetype.NoteTypeShortDesc}}</div>
            </div>
            <div class='row'>
              <div class='col-lg-2 col-md-3 col-sm-12 nsg-primary-color nsg-text-right'><label for='NoteTypeDesc'>Note Type Desc:&nbsp;</label></div>
              <div class='col-lg-auto col-md-auto col-sm-12' id='NoteTypeDesc'>{{notetype.NoteTypeDesc}}</div>
            </div>
            <div class='row'>
              <div class='col-lg-2 col-md-3 col-sm-12 nsg-primary-color nsg-text-right'><label for='NoteTypeClientScript'>Note Type Client Script:&nbsp;</label></div>
              <div class='col-lg-auto col-md-auto col-sm-12' id='NoteTypeClientScript'>{{notetype.NoteTypeClientScript}}</div>
            </div>
        </div>
      </td><tr>
    </ng-template>
  </p-table>
</div>
<!-- modal edit window -->
<app-notetype-detail-window [notetype]='windowNoteTypeInput'
  (emitCloseWin)='closeWin($event)'></app-notetype-detail-window>
<!-- End of notetype.grid.component.html -->

This calls the following component method:

  getNoteTypesLazy( event: LazyLoadEvent ) {
    console.log( `${this.codeName}.getNoteTypesLazy, ${JSON.stringify(event)}` );
    this.filters = this.formatFilters( event, this.trans );
    setTimeout( ( ) => {
      this.loading = true;
      this.lastTableLazyLoadEvent = event;
      //
      this.getAllSubscription =
        this._data.getModelLazy<INoteType>( event ).subscribe({
          next: (lazyResults) => {
            this.notetypes = lazyResults.results;
            this.totalRecords = lazyResults.totalRecords;
            this.loading = false;
          },
          error: (error) => {
            this.baseErrorHandler(
              `${this.codeName}`, `getAllNoteTypes:`, error );
            this.loading = false;
          },
          complete: () => { }
        });
    }, 0 );
  }

One question is what is your backend like. In general, your looking at SQL SKIP/TAKE query.