How to display paging results using paging id using ngx-datatable & angular?

Question

Requirement:

Showing dynamic data using ngx-datatable and use paging using page id

Description :

I have a dynamic data where I am displaying it using the ngx-datatable in angular and here everything works but the issue I m not sure how to apply the paging using the page_id (sent to the server using post body). Here I am getting the page_id along with the API response this is 1st API call. here page_id has to be sent as a body for the very same API for getting the rest of results.

Ex: Suppose I have 20 results in the 1ST API call I will get the 10 records and a page id by using the page id how can I get the next 10 results

What I implemented:

Getting data and displaying it in table basic paging applied

Below is my code :

Result=[];
  reorderable: boolean = true;
  selected = [];
  rows = [];
  columns = [];
  DataArray = [];
  Results = {
    "data": [
      {
        "_score": 0.36464313,
        "_type": "data",
        "_id": "abcd",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcd",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "dell_laptop"
      },
      {
        "_score": 0.36464314,
        "_type": "data",
        "_id": "abcde",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcde",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "lenovo_laptop"
      },
      {
        "_score": 0.36464314,
        "_type": "data",
        "_id": "abcdef",
        "_source": {
          "filter": "data",
          "information": {
            "product_id": "abcde",
            "creation_utctime": "1477335693653"
          },
          "enduser": "free"
        },
        "_index": "lenovo_laptop"
      }
    ],
    "total": 4,
    "page_id": "WpNdVJMMjlJVnJTYTFuUklB"
  }



  LoadInfo(){
    this.DataArray = ["filter","information.product_id","information.creation_utctime","enduser"];
    this.rows=[];
    this.Result = this.Results['data'];
// tslint:disable-next-line: forin
    for (var res in this.Result) {
      var row = {};
      for (var key in this.Result[res]['_source']) {
        if (typeof this.Result[res]['_source'][key] === 'object') {
          for (var k in this.Result[res]['_source'][key]) {
            let temp = key + "." + k;
            row[temp] = this.Result[res]['_source'][key][k];
          }
        } else {
          row[key] = this.Result[res]['_source'][key]
        }
        row['_id'] = this.Result[res]['_id'];
      }
      this.rows.push(row);
    }
    console.log(this.rows);

  }

  onActivate(event) {
    // console.log('Activate Event', event);
  }

  onSelect({ selected }) {
    // console.log('Select Event', selected, this.selected);

    this.selected.splice(0, this.selected.length);
    this.selected.push(...selected);
  }

HTML Code:

<button type="button" (click)="LoadInfo()">LoadData</button>

 <div>
     <ngx-datatable class="material ui" [rows]="rows" [columnMode]="'force'" [headerHeight]="50"
     [footerHeight]="50" [limit]="2" [rowHeight]="'auto'" [reorderable]="reorderable" [selected]="selected"
     [selectionType]="'checkbox'" [scrollbarH]="true" [sortType]="'multi'" (activate)="onActivate($event)"
    (select)='onSelect($event)'>

    <ngx-datatable-column [width]="30" [sortable]="true" [canAutoResize]="false" [draggable]="false"
    [resizeable]="false" class="uih">
    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
      let-selectFn="selectFn">
      <input type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" />
    </ng-template>
    <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected"
      let-onCheckboxChangeFn="onCheckboxChangeFn">
      <input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column *ngFor="let attr of DataArray" [sortable]="true" prop={{attr}} name={{attr}}>
  </ngx-datatable-column>

     </ngx-datatable>
</div>

Stackblitz link: https://stackblitz.com/edit/angular-secw8u

Note: even though if there is pageid also some times after 10 records there may not be more records also

here api call is simple post request

api : https://xxxx.xxxx..com/<some method>
 body: { "key1":"data1","key2":"data2","pageid":"ss"}

here in the first api call we wont send page id as after calling the first api call we will get response in that we will get the pageid and for the second api call i mean for paging then we have to use the pageid

Answer 1

For pagination you need to know total number of pages. Otherwise you need total number of items along with number of items per page (to derive total number of pages). In your case you only have a page-id which does not even say the which page you are on. The page-id only gives you access to next page items.

This API is useful if you implement an infinite scroll feature. Otherwise you can only implement a more button to which loads new items to table. The link you provided in comments implements this more button feature.

So you can override the default footer of ngx-datatable to add your more button to load more items to table.

<ngx-datatable-footer>
    <ng-template ngx-datatable-footer-template
        let-rowCount="rowCount"
        let-pageSize="pageSize"
        let-selectedCount="selectedCount"
        let-curPage="curPage"
        let-offset="offset"
        let-isVisible="isVisible">

        <div class="datatable-footer-inner selected-count">
            <div class="page-count" *ngIf="selectedCount">
                <span> {{selectedCount}} selected / </span> {{rowCount}} total
            </div>
            <div class="datatable-pager">
                <ul class="pager">
                    <li class="pages active" role="button" aria-label="next" *ngIf="rowCount">
                        <a href="javascript:void(0)" (click)="LoadInfo()"> Next </a>
                    </li>
                </ul>
            </div>
        </div>

    </ng-template>
</ngx-datatable-footer>

Stackblitz Demo