Update to retrieve the jumps page by page.

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html

@@ -2,7 +2,10 @@
   <div>
     <button mat-raised-button color="accent" [routerLink]="['/newjump']" [routerLinkActive]="['active']" skipLocationChange>{{ 'List_Jump_Add' | translate }}</button>
   </div>
-  <div *ngIf="dataSourceTable != null else loading">
+
+  <mat-progress-bar [mode]="'indeterminate'" *ngIf="isLoading"></mat-progress-bar>
+
+  <div>
     <table mat-table [dataSource]="dataSourceTable">
       <ng-container matColumnDef="infos">
         <th mat-header-cell *matHeaderCellDef style="min-width: 80px;"></th>
@@ -17,7 +20,7 @@
       <ng-container matColumnDef="id">
         <th mat-header-cell *matHeaderCellDef style="min-width: 70px;">{{ 'List_Jump_Header_Num' | translate }}</th>
         <td mat-cell *matCellDef="let element; let i = index">
-          {{ resultsLength - ( (dataSourceTable.paginator.pageIndex * dataSourceTable.paginator.pageSize ) + i ) }}
+          {{ paginator.length - ( (paginator.pageIndex * paginator.pageSize ) + i ) }}
         </td>
       </ng-container>
 
@@ -68,9 +71,6 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>
-  <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 
-  <ng-template #loading>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+  <mat-paginator #paginator [pageSize]="20" (page)="pageChanged($event)" showFirstLastButtons></mat-paginator>
 </div>