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

Marita

Calculate the no of pages and send one by one once click – Halliard

See this:github.com/swimlane/ngx-datatable/blob/master/demo/paging/… – Halliard

@PrashantPimpale here i have only pageid and that is the only one which i can send – Marita

where does pageId come from? what else may the server sided response contain? usually, you should get: nextPageId, prevPageId to be able to navigate forward/backwards. and if you want to directly jump to a certain page, you'd need to get a list of available pages with all relevant pageID's. – Hagio

@Hagio pageid comes from the response along with pageid it contains some data which i posted in question here i dont have any page number sent from server side – Marita

well, this question can't be answered, right now. you are using an api call, to get data and want to know, how to use part of that data for a second api call. to help you, we'd need the api documentation of your backend... – Hagio

@Hagio please check the updated question – Marita

@Hagio basically it is kind of this sccenario grokonez.com/frontend/angular/… – Marita

@Marita is this you are trying to achieve? – Developing

@MunimMunna kind of say we load 10 records first by clicking on next it will next 10 records from server total 20 records it has to show. an why to remove the paging number ? – Marita

The link you provided does not support paging number, only supports NEXT button. If you want to show 20 records then you have to append new rows to existing rows. – Developing

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

Developing

this is perfect but when ever we are increasing row better we have paging – Marita

Surely paging is better, but for that your API should have the information I mentioned in paragraph 1. – Developing