Pager missing #576

starpipi · 2017-10-21T14:23:47Z

I am using the ServerDataSource to query data from server.
Data shows ok,but the PAGER is missing.

I tried config the pager in settings
like
settings:{
pager:{
display:true,
perPage:2
}
}
but still not working.
The template binding shows "ng-reflect-ng-if": "false".

It seems nobody got this problem.
Does anyone know what I'm missing?

starpipi · 2017-10-22T02:36:48Z

Problem solved。

After debuged the source code. I found the reason which made the pager missing.

1.pager.display is not the only parameter can effect the pager shown.
pager component has a function "shouldshow()" return this.source.count() > this.perPage;
2.BUT！！ When I look the count function in serverDataSource ,functon "count()" return lastRequestCount. this parameter is from extractTotalFromResponse() that's the key made pager missing.
3. In function "extractTotalFromResponse()" (server.data-source.js line.59) If you haven't setted "totalKey" in serverDataSource like me. this function will return the raw Data which http response.
so In 2. "this.source.count() > this.perPage = false" effect the pager showing.

4.fix way: Adding the "total:xxx" data in your response json, AND setting totalKey in your serverDataSource like this:
var dataFromServer = new ServerDataSource(this.http,{endPoint:'http://......',dataKey:'data',totalKey:'total'}).

PS: Please forgive my poor english grammra,I'm chinese,english is not my mother language.

souzaemmanuel · 2018-01-10T19:01:01Z

Hello budy, how are you?
The same problem is happening to me, that the pager is not displayed.
However I did as you said and still did not work.

Additionally, I have seen that it is necessary to return via the response header x-total-count. But it still does not work.

My ServerDataSource is as follows:


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

starpipi · 2018-01-11T02:27:19Z

Hello @souzaemmanuel ,
When I solved this problem last time,I tried to response the total count in my response json data,but I haven't tried put total count in response header.
you should try put the total into response json data.

If it still not working... please debug the source code which I mentioned(server.data-source.js),I think the problem is still in the extractTotalFromResponse() function.

I dont know if there are some fixs these 2 month. So you should debug your version source code.

Good luck.
If there are any other things. Please let me know.I'm also a newbie LOL...

souzaemmanuel · 2018-01-11T15:45:04Z

Hey man, finally I got it! Just passing the total through into the header.
In the file server.data-source.js the extractTotalFromReponse method does the following:
* Extracts total rows count from the server response
* Looks for the count in the heders first, then in the response body

In my case, to work perfectly even had to enable in my API the headers with the total key, which the api sent to the angular application.
My API don't returns the data key, because the ng2-smart-table by default get the JSON from the body.
Finally, if someone else needs my ServerDataSource, it looks like this:

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

Thanks for the help.

starpipi · 2018-01-12T01:41:09Z

Hey @souzaemmanuel ，I'm glad to hear your code is working. You are Welcome.

PrasanthBaski · 2018-01-18T09:36:03Z

Hi am new to angular 2? Am also having the same issue.when i load the data from server ,the pager is not working,it will loads the entire data to my browser,can u show me the working code snippet for server.data-source.js

starpipi · 2018-01-19T00:56:15Z

Hi @PrasanthBaski. I didn't change server.data-source.js code.I just debug into it.
In my case ,like my former post, I just add a key "total" in my response json data,and config it into ServerSource just like this below:
{
endPoint: '/apigateway/commonservice/user/list',
dataKey: 'data',
totalKey: 'total',
}
which made it worked.

Maybe you should try it.

PrasanthBaski · 2018-01-19T07:29:20Z

Hi@starpipi
After i do the above one in my file it shows the below error:
ERROR Error: Uncaught (in promise): Error: Data must be an array.
Please check that data extracted from the server response by the key '[data]' exists and is array.
../../../../ng2-smart-table/lib/data-source/server/server.data-source.js/ServerDataSource.prototype.extractDataFromResponse@http://localhost:4201/vendor.bundle.js:25008:15
../../../../ng2-smart-table/lib/data-source/server/server.data-source.js/ServerDataSource.prototype.getElements/<@http://localhost:4201/vendor.bundle.js:24993:26
../../../../rxjs/operators/map.js/MapSubscriber.prototype._next@http://localhost:4201/vendor.bundle.js:29831:22
../../../../rxjs/Subscriber.js/Subscriber.prototype.next@http://localhost:4201/vendor.bundle.js:27484:13
onLoad@http://localhost:4201/vendor.bundle.js:91718:21
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4201/polyfills.bundle.js:2966:17
onInvokeTask@http://localhost:4201/vendor.bundle.js:73316:24
../../../../zone.js/dist/zone.js/</</ZoneDelegate.prototype.invokeTask@http://localhost:4201/polyfills.bundle.js:2965:17
../../../../zone.js/dist/zone.js/</</Zone.prototype.runTask@http://localhost:4201/polyfills.bundle.js:2733:28
../../../../zone.js/dist/zone.js/</</ZoneTask.invokeTask@http://localhost:4201/polyfills.bundle.js:3040:24
invokeTask@http://localhost:4201/polyfills.bundle.js:4081:9
globalZoneAwareCallback@http://localhost:4201/polyfills.bundle.js:4107:17

starpipi · 2018-01-19T08:50:52Z

Hi @PrasanthBaski Is your response json data object is an array?
this error shows you config your dataKey is 'data' and your data object is not an array,
so table can't use it as table's data.

I wander what's in your data object.
Could you plz copy your response json here?
Maybe I could figure out what cause this error.

PrasanthBaski · 2018-01-19T09:16:25Z

Hi @starpipi below is the json am getting from rest service,As of now what's my problem is ,i didnot get pager ,instead of it it loads the entire data to my browser from the server
[
{
"empId": "1115",
"age": 0,
"doj": null,
"status": "Active"
},
{
"empId": "1116",
"age": 0,
"doj": null,
"status": "Active"
},
{
"empId": "1120",
"age": 0,
"doj": null,
"status": "Active"
},
{
"empId": "1125",
"age": 52,
"doj": null,
"status": "Active"
}
]

PrasanthBaski · 2018-01-19T09:49:54Z

{
endPoint: '/apigateway/commonservice/user/list',
dataKey: 'data',
totalKey: 'total',
}
my doubt here is we are setting our totalKey:'total' But ,am getting response data as array of json ,so my thought is we need to add something for totalKey to make it as workable

starpipi · 2018-01-22T00:23:11Z

Hi @PrasanthBaski ,I'm sorry I didn't check out my email these two days.
You thought is right, when I got this problem I was getting json data from rest server just like you.No total count, just array data.

After I debug and change the setting, I also add the 'total' count into my response json just like this blow:
{
data: [ {...... }],
total: totalCountNumber
}

PrasanthBaski · 2018-01-22T08:52:46Z

Hi @starpipi ,can you please tell me where i need to set the total count ,In which file i need to modify the code??.Am sitting in this issue for more a week.

starpipi · 2018-01-22T09:04:04Z

Hi @PrasanthBaski ,forgive my poor english.
I don't know if I translate correct,english is not my mother language.

total count setting just in ServerDataSource like this:
this.source = new ServerDataSource(http, {
endPoint: this.url,
pagerLimitKey:"_limit",
pagerPageKey:"_page",
sortDirKey: "_order",
sortFieldKey: "_sort",
dataKey:'data',
totalKey:'x_total_count'
});

totalKey is your setting.
The value of totalKey which in this example is "x_total_count"
You should modify your response json object. add an object which key is "x_total_count" in the same object of "data" like this:
{
data: [...], // your table data array...about 20 size
x_total_count: 50 // your total data size.
}

this setting will automatically setting your total as the value you response returned。
then the pager will show and total is 50 and there are 3 pages。

serxhioisufaj · 2018-01-26T13:39:52Z

i have the same problem when i use server data source, i don't get pager i get all my data into one page @starpipi

liganggang · 2018-03-08T05:56:53Z

请问 api的token 怎么设置在线等

liganggang · 2018-03-08T05:57:39Z

toek n

jyzbamboo · 2019-04-19T09:42:59Z

@starpipi HIHI, I also got the same problem

The error was :
"
core.js:12584 ERROR Error: Uncaught (in promise): Error: Data must be an array.
Please check that data extracted from the server response by the key 'list' exists and is array.
Error: Data must be an array.
"
My code was :

let conf = {
  endPoint: ".....",
  pagerPageKey: "pageNum",
  pagerLimitKey: "pageSize",
  totalKey: "total",
  dataKey: "list",
}
this.source = new ServerDataSource(this.httpTest, conf);

The server response was :
{
"total":2,
"pageSize":12,
"list":[
{"additionalInfo":{"description":"HK Office","location":"HK Office","site_y":"10","site_x":"10","gateway":true},"tenantId":{"entityType":"TENANT","id":"37fd8170-036d-11e9-9059-9d7dd0658ecf"},"customerId":{"entityType":"CUSTOMER","id":"13814000-1dd2-11b2-8080-808080808080"},"name":"IIoT Gateway HKOffice","createdTime":1546410366654,"id":{"entityType":"DEVICE","id":"49519de0-0e57-11e9-bebe-7d0ac928b964"},"type":"Gateway","ownerId":{"entityType":"TENANT","id":"37fd8170-036d-11e9-9059-9d7dd0658ecf"}},
{"additionalInfo":{"description":"IIoT Gateway Ken","location":"HK Office","gateway":true},"tenantId":{"entityType":"TENANT","id":"37fd8170-036d-11e9-9059-9d7dd0658ecf"},"customerId":{"entityType":"CUSTOMER","id":"13814000-1dd2-11b2-8080-808080808080"},"name":"IIoT Gateway Ken","createdTime":1546228883427,"id":{"entityType":"DEVICE","id":"bce2d330-0cb0-11e9-bebe-7d0ac928b964"},"type":"Gateway","ownerId":{"entityType":"TENANT","id":"37fd8170-036d-11e9-9059-9d7dd0658ecf"}}
],
"pageNum":1
}

The error showed that it could not get my data. But my dataKey of config was right, and it was a array .
Can you help me ? Thx

starpipi · 2019-04-23T04:51:57Z

Hi @jyzbamboo ,I'm so sorry about replying so late.
This issue was long time ago,I really can't remember what i did last time,it's nearly 2 years ago.

In your code ,the error shows it can't get data by your config. but your config shows was right.I'm aggree with your opinion.
Maybe there are some other problem cause your problem.

I'm so sorry I can't help you fix this problem. I have no envirement in my computer,so i can't recreate your problem.
Maybe you should try some other way.good luck.

sharankasandula · 2019-08-01T09:53:31Z

Hi, I had the same issue and after spending more than 2 days, here is the summary of what I learned.

Like @starpipi said, the reason pager is not shown is probably because ServerDataSource class was not able to find the 'total' header in the response headers for the particular get request you want the pagination working for. You can check if your server is sending you this header in the Chrome dev tools in the request headers section. You can find it in the image.

Initially I did not find this in the header and later after some research discovered that Loopback does not support this out of the box. I followed an article for implementing pagination in Loopback 3. I used the script from that and got the header working. Now I could see the header in the Chrome dev tools but still was not able to access these headers and neither was the Pager showing up.

Later, I discovered that you need to expose custom headers from the server in order to get access them in the frontend. Based on this Stackoverflow question, you need to expose the custom headerin cors config. Like shown in the image

Hope this helps someone in the future, since I spent several hours in debugging this issue.

ashiqks · 2020-03-31T18:00:33Z

@jyzbamboo

@starpipi HIHI, I also got the same problem

The error was :
"
core.js:12584 ERROR Error: Uncaught (in promise): Error: Data must be an array.
Please check that data extracted from the server response by the key 'list' exists and is array.
Error: Data must be an array.
"
My code was :
let conf = {
  endPoint: ".....",
  pagerPageKey: "pageNum",
  pagerLimitKey: "pageSize",
  totalKey: "total",
  dataKey: "list",
}
this.source = new ServerDataSource(this.httpTest, conf);
The server response was :
{
"total":2,
"pageSize":12,
"list":[
{"additionalInfo":{"description":"HK Office","location":"HK Office","site_y":"10","site_x":"10","gateway":true},"tenantId":{"entityType":"TENANT","id":"37fd8170-036d-11e9-9059-9d7dd0658ecf"},"customerId":{"entityType":"CUSTOMER","id":"13814000-1dd2-11b2-8080-808080808080"},"name":"IIoT Gateway HKOffice","createdTime":1546410366654,"id":{"entityType":"DEVICE","id":"49519de0-0e57-11e9-bebe-7d0ac928b964"},"type":"Gateway","ownerId":{"entityType":"TENANT","id":"37fd8170-036d-11e9-9059-9d7dd0658ecf"}},
{"additionalInfo":{"description":"IIoT Gateway Ken","location":"HK Office","gateway":true},"tenantId":{"entityType":"TENANT","id":"37fd8170-036d-11e9-9059-9d7dd0658ecf"},"customerId":{"entityType":"CUSTOMER","id":"13814000-1dd2-11b2-8080-808080808080"},"name":"IIoT Gateway Ken","createdTime":1546228883427,"id":{"entityType":"DEVICE","id":"bce2d330-0cb0-11e9-bebe-7d0ac928b964"},"type":"Gateway","ownerId":{"entityType":"TENANT","id":"37fd8170-036d-11e9-9059-9d7dd0658ecf"}}
],
"pageNum":1
}

The error showed that it could not get my data. But my dataKey of config was right, and it was a array .
Can you help me ? Thx

There is a function extractDataFromResponse in the ng2-smart-table library, there change res.data to res.json()

starpipi closed this as completed Oct 22, 2017

woodm1 mentioned this issue Nov 28, 2017

Smart table paging not working akveo/ngx-admin#1428

Closed

sonali-parekh22 mentioned this issue Nov 30, 2017

Pagination doesn't work correctly #221

Open

sharankasandula mentioned this issue Aug 1, 2019

Pager is missing #1052

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pager missing #576

Pager missing #576

starpipi commented Oct 21, 2017

starpipi commented Oct 22, 2017

souzaemmanuel commented Jan 10, 2018 •

edited

starpipi commented Jan 11, 2018

souzaemmanuel commented Jan 11, 2018 •

edited

starpipi commented Jan 12, 2018

PrasanthBaski commented Jan 18, 2018

starpipi commented Jan 19, 2018

PrasanthBaski commented Jan 19, 2018

starpipi commented Jan 19, 2018

PrasanthBaski commented Jan 19, 2018 •

edited

PrasanthBaski commented Jan 19, 2018

starpipi commented Jan 22, 2018

PrasanthBaski commented Jan 22, 2018

starpipi commented Jan 22, 2018

serxhioisufaj commented Jan 26, 2018 •

edited

liganggang commented Mar 8, 2018

liganggang commented Mar 8, 2018

jyzbamboo commented Apr 19, 2019

starpipi commented Apr 23, 2019

sharankasandula commented Aug 1, 2019 •

edited

ashiqks commented Mar 31, 2020 •

edited

Pager missing #576

Pager missing #576

Comments

starpipi commented Oct 21, 2017

starpipi commented Oct 22, 2017

souzaemmanuel commented Jan 10, 2018 • edited

starpipi commented Jan 11, 2018

souzaemmanuel commented Jan 11, 2018 • edited

starpipi commented Jan 12, 2018

PrasanthBaski commented Jan 18, 2018

starpipi commented Jan 19, 2018

PrasanthBaski commented Jan 19, 2018

starpipi commented Jan 19, 2018

PrasanthBaski commented Jan 19, 2018 • edited

PrasanthBaski commented Jan 19, 2018

starpipi commented Jan 22, 2018

PrasanthBaski commented Jan 22, 2018

starpipi commented Jan 22, 2018

serxhioisufaj commented Jan 26, 2018 • edited

liganggang commented Mar 8, 2018

liganggang commented Mar 8, 2018

jyzbamboo commented Apr 19, 2019

starpipi commented Apr 23, 2019

sharankasandula commented Aug 1, 2019 • edited

ashiqks commented Mar 31, 2020 • edited

souzaemmanuel commented Jan 10, 2018 •

edited

souzaemmanuel commented Jan 11, 2018 •

edited

PrasanthBaski commented Jan 19, 2018 •

edited

serxhioisufaj commented Jan 26, 2018 •

edited

sharankasandula commented Aug 1, 2019 •

edited

ashiqks commented Mar 31, 2020 •

edited