Я пытаюсь создать настраиваемую нумерацию страниц для плавающей строки с данными ngx (https://github.com/swimlane/ngx-datatable).
Пользовательский шаблон для нижнего колонтитула работает нормально (согласно документации: http://swimlane.github.io/ngx-datatable/#footer), и нумерация страниц)также работает, как и ожидалось, но обратите внимание, что в компоненте DOM есть код с пользовательским пейджером. Он не отображается в веб-интерфейсе, поскольку кажется, что компонент не принимает пользовательские шаблоны.
Кто-нибудь знает, как правильно добавить пользовательский шаблон в пейджер данных ngx-datatable?
Моя конкретная проблема заключается в том, что мне нужно заменить левый и правый элементы по умолчанию на fontawesome компоненты, но, возможно, мне также хотелось бычтобы сделать некоторые другие косметические или функциональные изменения там.
Мой код.
<ngx-datatable
*ngIf="(files | objectPropertyLikeStringPipe:fileNameLikeDataContract | objectHasTagPipe:searchTags:'tags').length"
class="classic show-overflow"
bbsNgxResizeWatcher
[rowHeight]="undefined"
[columnMode]="'flex'"
(activate)="tableActivate($event)"
[rows]="files | objectPropertyLikeStringPipe:fileNameLikeDataContract | objectHasTagPipe:searchTags:'tags'"
[sorts]="[{prop:'type',dir:'asc'},{prop:'fileName',dir:'asc'}]"
[columns]="columns"
[selected]="selected"
[selectionType]="'checkbox'"
(select)="onSelect($event)"
[limit]="2"
[footerHeight]="50"
>
<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">
<div class="page-count">
<span *ngIf="selectedMessage">
{{selectedCount.toLocaleString()}} {{selectedMessage}} /
</span>
{{rowCount.toLocaleString()}} {{totalMessage}}
</div>
<datatable-pager
#ngxDatatablePager
[pagerLeftArrowIcon]="'datatable-icon-left'"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
[hidden]="!((rowCount / pageSize) > 1)"
(change)="ngxDatatable.onFooterPage($event)">
<ng-template>
<ul class="pager">
<li [class.disabled]="!ngxDatatablePager.canPrevious()" [class.target-p]="true">
<a
role="button"
aria-label="go to first page"
href="javascript:void(0)"
(click)="ngxDatatablePager.selectPage(1)">
<fa-icon [icon]="['fal', 'angle-left']"
></fa-icon>
<p>asdklslac</p>
</a>
</li>
<li [class.disabled]="!ngxDatatablePager.canPrevious()">
<a
role="button"
aria-label="go to previous page"
href="javascript:void(0)"
(click)="ngxDatatablePager.prevPage()">
<i class="{{pagerLeftArrowIcon}}"></i>
</a>
</li>
<li
role="button"
[attr.aria-label]="'page ' + pg.number"
class="pages"
*ngFor="let pg of pages"
[class.active]="pg.number === page">
<a
href="javascript:void(0)"
(click)="ngxDatatablePager.selectPage(pg.number)">
{{pg.text}}-1
</a>
</li>
<li [class.disabled]="!ngxDatatablePager.canNext()">
<a
role="button"
aria-label="go to next page"
href="javascript:void(0)"
(click)="ngxDatatablePager.nextPage()">
<i class="{{pagerRightArrowIcon}}"></i>
</a>
</li>
<li [class.disabled]="!ngxDatatablePager.canNext()">
<a
role="button"
aria-label="go to last page"
href="javascript:void(0)"
(click)="ngxDatatablePager.selectPage(totalPages)">
<i class="{{pagerNextIcon}}"></i>
</a>
</li>
</ul>
</ng-template>
</datatable-pager>
</ng-template>
</ngx-datatable-footer>
</ngx-datatable>
Визуальный вывод (PS! Нумерация страниц по-прежнему по умолчанию. Он не использует мой ng-шаблон пагинации!):
