Customize ngx-datatable pager component to show Text instead of Icons and add totalVisible property?

0
votes

I am Customizing the datatable-pager in ngx-dataTable and can able to add footers and pagers. I have only two issues as follows -

  1. For prev / Next / First and Last button , How to show text instead of icon?
  2. How to add totalVisible property to show first 3 and last 3 pages in the pager and show a ... disabled button in between?

currently I am writing the following code -

<ngx-datatable-footer>
              <ng-template ngx-datatable-footer-template 
                let-rowCount="rowCount"
                let-pageSize="pageSize"
                let-selectedCount="selectedCount"
                let-curPage="curPage"
                let-offset="offset"
                let-isVisible="isVisible"
                >

                <datatable-pager 
                [pagerLeftArrowIcon]="datatable-icon-Left"
                [pagerRightArrowIcon]="'datatable-icon-right'" 
                [pagerPreviousIcon]="'datatable-icon-prev'"
                [pagerNextIcon]="'datatable-icon-skip'" 
                [page]="curPage" 
                [size]="pageSize" 
                [count]="rowCount"
                (change)="table.onFooterPage($event)">
                </datatable-pager>
              </ng-template>
</ngx-datatable-footer>

I need to pass some Text Props instead of the arro icons and next/prev icons to show text. And I also need to show first 3 and last 3 page buttons in the pager and show a ... disabled button in between in case there are more than 7 page to show Just like enter image description here

2
javascriptangulardatatablepaginationngx-datatable

2 Answers

0
votes

to replace icons with text you will have to replace datatable-pager with your component, and provide the functionality. You can see here how datatable-pager has been implemented and create your own component.

Link: https://github.com/swimlane/ngx-datatable/blob/master/src/components/footer/pager.component.ts

If you need any help feel free to ask.