Ngx-datatable: Need to Update the paging style as shown

[vibingopal]

Hi, 

I am working on designing the data table with the given features. But unable to change the style as per attached document for pagination. Could you please help me with this feature on how to apply styles to the datatable pagination

Thank you``
![pagingdesign](https://cloud.githubusercontent.com/assets/17860925/24626795/121dea44-1878-11e7-8b62-dcaa8a9b4fd3.jpg)

[vibingopal]

Unable to implement ... feature as per design. Here ... stands for number of pages which is not in the viewed scope.

For example : if there are 10 pages . We have to set the data table to 1,2,3,4,5 .... 10

Trying to implement this kind of feature - http://codepen.io/crawlink/pen/qNbwpE

[adammedford]

I believe this would be covered under #547

[vibingopal]

Thank you for the suggestion. But how to add custom icon to the pagination footer. By default it is previous icon .I need to implement arrow on the previous and next page on footer page. Any suggestion ?

[vibingopal]

Able to implement the custom icon for the pagination footer.But not able to implement ... feature as attached in the post. Any idea is helpful.

Trying to implement this kind of feature - http://codepen.io/crawlink/pen/qNbwpE

[adammedford]

https://swimlane.gitbooks.io/ngx-datatable/content/api/table/inputs.html

Custom CSS classes that can be defined to override the icons classes for up/down in sorts and previous/next in the pager. Defaults:

sortAscending: 'icon-down',
sortDescending: 'icon-up',
pagerLeftArrow: 'icon-left',
pagerRightArrow: 'icon-right',
pagerPrevious: 'icon-prev',
pagerNext: 'icon-skip'

To change the pager icons you need to add [cssClasses] as an input on your grid and provide it with an object containing these values. If you tell me what icons you want to use I can provide you with an example.

Further customization of the pager isn't currently possible.

[adammedford]

I use Font Awesome so as an example:

 customClasses = {
        sortAscending: 'fa fa-sort-asc',
        sortDescending: 'fa fa-sort-desc',
        pagerLeftArrow: 'fa fa-chevron-left',
        pagerRightArrow: 'fa fa-chevron-right',
        pagerPrevious: 'fa fa-step-backward',
        pagerNext: 'fa fa-step-forward'
    };
template: `
// only the relevant bits here
<ngx-datatable [cssClasses]='customClasses'><ngx-datatable>
`

[vibingopal]

Thanks Adam. I am able to modify the custom icon on the pager. But not able to implement the functionality as mentioned. We can't customize the paging component of the ngx datatable ?
As per design we need to provide this feature(...) to users.

http://plnkr.co/edit/JVQMPvV8z2brCIzdG3N4?p=preview

Any other ideas ?

[adammedford]

Not currently; the issue I linked earlier suggests that it is a planned feature they are currently accepting PRs for. If this is a feature you need I'd recommend submitting a PR for it yourself.

[vibingopal]

Thanks adam. I just raised PR on your suggestion.

[vibingopal]

Is there any way to show the last page with respect to other pages as attached.

[adammedford]

Not currently.

Your best option is to build your own external pager component until this feature is supported by this project. (No guarantees this is something that will ever happen)

[amcdnl]

I think a custom footer template would be nice for things like this. Others have asked for it too, so I'll plan to get this in soon.

[vibingopal]

Thank you Austin. Please let me know once it is available.

[vibingopal]

Hi Austin,

Any idea when the feature will be available please?

Thanks

[amcdnl]

Resolved by custom footer in 8.2.0

[senthilmca90]

Hi, I am trying custom CSS pagination next and prev button instead of an icon. If you have any example help me