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:

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 : ./<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

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./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../<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

• javascript
• angular
• typescript
• ngx-datatable

• Calculate the no of pages and send one by one once click – Prashant Pimpale Commented Apr 23, 2019 at 14:07
• See this:github./swimlane/ngx-datatable/blob/master/demo/paging/… – Prashant Pimpale Commented Apr 23, 2019 at 14:15
• @PrashantPimpale here i have only pageid and that is the only one which i can send – Dexter Commented Apr 24, 2019 at 3:36
• 1 where does pageId e 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. – errand Commented Apr 24, 2019 at 12:12
• @errand pageid es 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 – Dexter Commented Apr 24, 2019 at 14:06

1 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 ments 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