Как реализовать разбиение на страницы на стороне сервера в Angular Mat-таблице

Question

Текущая реализация: Я предварительно загружаю все данные в одном вызове API, а затем загружаю в таблицу mat. Это то, что я реализовал до сих пор. Oninit компонента, я вызываю API и загружаю все данные в таблицу.

Желаемая реализация: Когда данные таблицы имеют 1000 строк, я хочу вызвать API для загрузки данные для каждой страницы таблицы.

        <mat-table [dataSource]="dataSource">

          <ng-container *ngFor="let item of headerRow; let i = index" matColumnDef={{headerRow[i]}}>
            <mat-header-cell *matHeaderCellDef> {{headerRow[i]}} </mat-header-cell>
            <mat-cell *matCellDef="let row">

              <mat-form-field floatLabel="never">
                <input matInput placeholder="Name" [value]="row[i]" [(ngModel)]="row[i]">

              </mat-form-field>
            </mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="headerRow"></mat-header-row>
          <mat-row *matRowDef="let row; columns: headerRow;">
          </mat-row>
        </mat-table>
        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

Answer 1

В основном, если вы хотите разбить на страницы на стороне сервера, вы должны внести некоторые изменения в свой API и передать в него нужные параметры. Затем обновляйте данные таблицы mat каждый раз, когда пользователь делает что-то, что вызывает изменения, поскольку у вас будет только 1 фиксированный набор строк (страница). Поскольку я не знаю технологии сервера, позвольте мне просто набросать для вас разрешение.

1. Создайте API, который будет возвращать только выбранные элементы:
   • Введите параметры запроса, такие как ?page=n&size=m и измените Ваш API для чтения этих параметров из запроса.
   • Используйте параметры page и size, чтобы Ваши SQL использовали SKIP (page-1)*size) и TAKE ( size). Помните, что Вы должны определить их после сортировки / фильтрации или всего, что изменит количество строк. Ищите свой язык, как это сделать. Я даю обобщенную идею c. Например, в C# Вы можете использовать LINQ, чтобы выполнять работу очень легко: пропустить , взять .
2. Получить информацию от paginator о текущее состояние для вызова API с допустимыми значениями параметров:
   • Используйте @ViewChild(), чтобы получить ссылку на Ваш paginator. Тогда внутри Вашего кода Вы можете использовать .pageIndex и .pageSize (входные данные MatPaginator ). Вы можете использовать эти значения для построения правильного запроса.
   • Использовать page EventEmmiter (снова MatPaginator но выводит), подписаться на него и передать полную перезагрузку набора данных для таблицы .

Помните, что на данный момент вы несете ответственность за обновление данных при каждой сортировке / фильтрации / изменении размера страницы / изменении страницы.