Configure Datatables with Paginated Results

Question

Can anyone suggest how to configure datatables with paginated results?

As an example :

Paginated results from my backend api :

{
  "total": 50,
  "per_page": 15,
  "current_page": 1,
  "last_page": 4,
  "next_page_url": "http://domain.app?page=2",
  "prev_page_url": null,
  "from": 1,
  "to": 15,
  "data":[
        {
            // Result Object
        },
        {
            // Result Object
        }
  ]
}

Currently I am using ng2-smart-table with angular 6.

You guys can give me solution with normal datatables options from which I can control pagination.

I'm using ng2-smart-Table could you explain a little bit more the problem? — Abel Valdez, Aug 08 '18 at 14:57
@AbelValdez are you using api to produce data to the ng2-smart-table ? if so can you tell me your api responding how many results in one query ? — Fahim Uddin, Aug 08 '18 at 15:08

score 0 · Answer 1 · answered Aug 08 '18 at 15:16

0

This is my configuration of ng2-smart-table I hope it helps you.

HTML

<ng2-smart-table [settings]="settings" [source]="alerts"></ng2-smart-table>

Component ts

Configuration:

alerts: LocalDataSource;

 settings = {
    columns: {
      tester: {
        title: 'Tester'
      },
      part_number: {
        title: 'Part Number',
      },
    editable: false,
    actions:{
      add: false,
      edit: false,
      delete: false
    }
  };

Implementation

ngOnInit() { 
    this.alerts= new LocalDataSource([]); 
    this.alertService.getAlertsObservable().subscribe(res =>{
      this.alerts.load(res); 
    }); 
}

answered Aug 08 '18 at 15:16

Abel Valdez

2,368
1
16
33

Can you show your data structure? which are populating in that table ? – Fahim Uddin Aug 08 '18 at 15:21
the method `load` makes this for you. You dont need to populate or iterate info, take a look to `alerts: LocalDataSource;` it is a class of **ng2-smart-table** and they are in chage to populate the info. – Abel Valdez Aug 08 '18 at 15:24
Dude, you are not getting it, please read my question again, the subject is related to api data results, we need to take consider how our data is coming in which format and then how we are populating the data into the table. – Fahim Uddin Aug 08 '18 at 16:27

boyukbas · Answer 2 · 2019-04-10T10:55:20.623

If you read this thread, I think you will find the solution. https://github.com/akveo/ng2-smart-table/issues/576 Here is a brief info from the thread

this.source = new ServerDataSource(http, {
  endPoint: this.url,
  pagerLimitKey:"_limit",
  pagerPageKey:"_page",
  sortDirKey: "_order",
  sortFieldKey: "_sort",
  dataKey:'data',
  totalKey:'total_count'
});

data returned from server:

{
  data: [
    { "id": 1, "value": "A" },
    { "id": 2, "value": "B" },
    ...
  ],
  total_count: 10000
}

total_count will be used for calculating page count.

Alternatively I solved this problem with LocalDataSource like this ng2-smart-table with paging from back-end (Spring)

Configure Datatables with Paginated Results

2 Answers2