CODEWITHSUNDEEP
javascriptangularpaginationng2-smart-table
Crisiiii
Crisiiii

Reputation: 409

Pagination issue with ng2-smart-table

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!

Upvotes: 2

Views: 6493

Answers (3)

Mohamed Magdi
Mohamed Magdi

Reputation: 296

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
});

Upvotes: 0

asusfan
asusfan

Reputation: 41

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.

Upvotes: 0

Babak
Babak

Reputation: 1344

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.

Upvotes: 1

Related Questions