Pagination issue with ng2-smart-table

Question

I'm using the ng2-smart-table in an Angular 2 app and I have a problem with the pagination in it. I'm loading a data object array and it shows correctly the first five (I have 20 in total) but the pagination at the bottom of the table shows << >> without numbers between the arrows and if I click on the right arrow it shows me the next 15 all together. The settings for the table are:

private tableSettings = {
    columns: {
        id: {
          title: 'ID',
          filter: false
        },
        name: {
          title: 'Name',
          filter: false
        },
    },
    hideSubHeader: true,
    attr: {
        class: 'id-field'
    },
    actions:{
        edit: false
    },
    delete:{
        confirmDelete: true
    },
    pager : {
        display : true,
        perPage:5
    }
}

Any ideas why is it showing << >> instead of << 1 2 3 4 >> ?? Thanks!

In case somebody else stumbles upon this : https://github.com/akveo/ng2-smart-table/issues/221 — Marie, May 18 '17 at 13:18

score 1 · Answer 1 · answered Jul 05 '17 at 14:23

You haven't mentioned if you're using server data source or local. Assuming that you are using server data source, I guess you're not passing

X-Total-Count: 20

in your response header, so the client knows how many records in total you have.

Hope it helps.

score 0 · Answer 2 · answered Aug 24 '17 at 08:49

I've had a similar issue where the pagination didn't show at all. @Babak was almost right, you need to add X-Total-Count to your response header with the value of total rows, but you also need to expose that header by adding access-control-expose-headers:X-Total-Count to the headers.

e.g. for a C# WebApi:

var response = new HttpResponseMessage();
response.Headers.Add("access-control-expose-headers", "X-Total-Count");
response.Headers.Add("X-Total-Count", "100");

Hope this helps someone.

score 0 · Answer 3 · answered Oct 10 '20 at 13:29

0

you should pass totalKey in config object passed to source as following:

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: 'pageSize', // this should page size param name in endpoint (request not response)
totalKey: 'data.meta.total', // this is total records count in response, this will handle pager
});

answered Oct 10 '20 at 13:29

Mohamed Magdi

276
2
5

is this server data source different from the local data source? – Alok Rajasukumaran Jul 25 '21 at 11:53
yes, server data refer to data came from server directly so expected to sent request with params you pass to it, but local data means you already have the data so you want to play it locally at client side – Mohamed Magdi Aug 22 '21 at 18:55

Pagination issue with ng2-smart-table

3 Answers3