Настройте компонент пагинатора углового материала в соответствии с моими требованиями

В моем приложении есть компонент, в котором строки заполняются с помощью таблицы угловых материалов. Поскольку реализовано разбиение на страницы на стороне сервера, ответ json приведен ниже.

list - объект, который содержит записи таблицы.
next, first, last, previous - эти ссылки на объекты, которые дадут данные следующей/первой/предыдущей/последней страницы.

Мне нужно присвоить значения next, first, last, previous кнопкам пагинации материала angular.

Material Pagination ‹code›showFirstLastButtons‹/code›

Есть ли способ настроить кнопки пагинации? Пожалуйста, дайте мне несколько предложений.

JSON-ответ:

{  
list: [],  
totalRecords: 100,  
message: "Patient search successfull",  
next: "http://localhost:8084/findPatient/?page=2&size=10&patientId=&patientFirstName=&patientLastName=",  
first: "http://localhost:8084/findPatient/?page=0&size=10&patientId=&patientFirstName=&patientLastName=",  
last: "http://localhost:8084/findPatient/?page=9&size=10&patientId=&patientFirstName=&patientLastName=",  
previous: "http://localhost:8084/findPatient/?page=0&size=10&patientId=&patientFirstName=&patientLastName=",  
size: 10,  
currentPage: 1
}

Веб-приложение, созданное с использованием Angular 7 и Spring Boot. Поскольку я новичок в Angular, я не знаю, как создать пользовательскую директиву для разбиения на страницы.


angular angular-material angular7 mat-table
person lttesp    schedule 30.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать PageEvent для управления поведением пагинатора.

<mat-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="onPageEvent($event)">
</mat-paginator>

onPageEvent(event: PageEvent) {
   this.yourService.loadData(event.pageIndex).....;
}
person keepwalking    schedule 30.04.2019