ng2-smart-table using ServerDataSource data not changing when navigate page

1.8k views Asked by At

i'm using ng2-smart-table with ServerDataSource like this

this.source = new ServerDataSource(_http, {
  dataKey: 'data.data', 
  endPoint: 'https://myapi?page=', 
  pagerPageKey: 'data.meta.current_page',
  pagerLimitKey: 'data.meta.per_page',
  totalKey: 'data.meta.total',
});

on my url i got this http://localhost:4200/pages/admin/users-list?page=1 but it doesn't change when i navigate the pages even if i change the url to other page. It's working if i change my api from https://myapi?page=1 to https://myapi?page=2 i know i did something wrong but where is it?

EDIT

I don't know if this will work but i think i need to get the "current page" by listening to page change event. So for now i have this code:

this.source.onChanged().subscribe((change) => {
  if (change.action === 'page') {
    this.page = change.paging.page;
    this.userService.getAllUser(this.page).subscribe(
      (data:any)=>console.log(data.data.data)
    )
  }
});

i got a result just like i wanted, but the problem is how can i use the this.page to myapi?page=. anyone have a solution?

EDIT

this.source = new ServerDataSource(_http, {
  dataKey: 'data.data', 
  endPoint: 'https://myapi', 
  pagerPageKey: 'page',
  totalKey: 'data.meta.total',
});
1

There are 1 answers

7
Mohamed Magdi On

i think you need to change your page params in Data source config object

 this.source = new ServerDataSource(_http, 
{
dataKey: 'data.data',
endPoint: 'https://myapi/endpoint',
pagerPageKey: 'page', // this should be page number param name in endpoint (request not response) for example 'page'
pagerLimitKey: 'your-endpoint-param-name-for-pageSize', // this should page size param name in endpoint (request not response)
totalKey: 'data.meta.total', // this is total records count in response , key seems right 
});

so you need to change pagerPageKey value to 'page' and pagerpagelimit to your key in endpoint

no any need to handle this.source.onChanged() // remove this code