Angulaire Matières 2 table de côté de Serveur de pagination

Basé sur Wilfredo réponse (https://stackoverflow.com/a/47994113/986160) j'ai compilé un travail complet exemple puisque certaines pièces étaient manquantes à partir de la question. Voici un cas plus général pour le serveur-côté de la pagination et du tri en utilisant Angulaire 5 et la Conception de Matériel (encore besoin de brancher un filtrage) - j'espère que ce sera utile à quelqu'un:

Pagination Composant:

import { ViewChild, Component, Inject, OnInit, AfterViewInit } from '@angular/core';
import { EntityJson } from './entity.json';
import { EntityService } from './entity.service';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import { merge } from 'rxjs/observable/merge';
import { of as observableOf } from 'rxjs/observable/of';
import { catchError } from 'rxjs/operators/catchError';
import { map } from 'rxjs/operators/map';
import { startWith } from 'rxjs/operators/startWith';
import { switchMap } from 'rxjs/operators/switchMap';
@Component({
selector: 'entity-latest-page',
providers: [EntityService],
styles: [`
:host mat-table {
display: flex;
flex-direction: column;
min-width: 100px;
max-width: 800px;
margin: 0 auto;
}
`],
template:
`<mat-card>
<mat-card-title>Entity List 
<button mat-button [routerLink]="['/create/entity']">
CREATE
</button>
</mat-card-title>
<mat-card-content>
<mat-table #table matSort [dataSource]="entitiesDataSource" matSort class="mat-elevation-z2">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef  mat-sort-header> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</mat-card-content>
<mat-card-content>
<mat-paginator #paginator [length]="resultsLength"
[pageSize]="5"
[pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</mat-card-content>
</mat-card>
`
})
export class EntityLatestPageComponent implements AfterViewInit {
private entities: EntityJson[];
private entitiesDataSource: MatTableDataSource<EntityJson> = new MatTableDataSource();
private displayedColumns = ['id', 'name'];
resultsLength = 0;
isLoadingResults = false;
isRateLimitReached = false;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
public constructor( @Inject(EntityService) private entityService: EntityService) {
}
public ngAfterViewInit() {
//If the user changes the sort order, reset back to the first page.
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.isLoadingResults = true;
return this.entityService.fetchLatest(this.sort.active, this.sort.direction, 
this.paginator.pageIndex + 1, this.paginator.pageSize, 
(total) =>  this.resultsLength = total);
}),
map(data => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
//alternatively to response headers;
//this.resultsLength = data.total;
return data;
}),
catchError(() => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
return observableOf([]);
})
).subscribe(data => this.entitiesDataSource.data = data);
} 
}

---

Service:

import { EntityJson } from './entity.json';
import { ApiHelper } from '../common/api.helper';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AuthenticationService } from '../auth/authentication.service';
import { stringify } from 'query-string';
@Injectable()
export class EntityService {
private options: RequestOptions;
private apiPrefix: string;
private apiEndpoint: string;
constructor(
@Inject(Http) private http: Http,
@Inject(AuthenticationService) private authService: AuthenticationService) {
this.options = authService.prepareRequestHeaders();
this.apiPrefix = 'http://localhost:4200/api/v1/';
this.apiEndpoint = this.apiPrefix + 'entities';
}
public fetchLatest(sort: string = '', order: string = '', page: number = 1, perPage: number = 5, initTotal: Function = () => {}): Observable<EntityJson[]> {
return this.http.get(this.apiEndpoint +'?' + EntityService.createUrlQuery({sort: {field: sort, order: order}, pagination: { page, perPage }}), this.options)
.map((res) => {
const total = res.headers.get('x-total-count').split('/').pop();
initTotal(total);
return JSON.parse(res.text()).content
});
}
//should be put in a util
static createUrlQuery(params: any) {
if (!params) {
return "";
}
let page;
let perPage;
let field;
let order;
let query: any = {};
if (params.pagination) {
page = params.pagination.page;
perPage =  params.pagination.perPage;
query.range = JSON.stringify([
page,
perPage,
]);
}
if (params.sort) {
field = params.sort.field;
order = params.sort.order;
if (field && order) {
query.sort = JSON.stringify([field, order]);
}
else {
query.sort = JSON.stringify(['id', 'ASC']);
}
}
if (!params.filter) {
params.filter = {};
}
if (Array.isArray(params.ids)) {
params.filter.id = params.ids;
}
if (params.filter) {
query.filter = JSON.stringify(params.filter)
}
console.log(query, stringify(query));
return stringify(query);
}
}

---

Printemps De Démarrage Reste Contrôleur De Point De Terminaison

@GetMapping("entities")
public Iterable<Entity> filterBy(
@RequestParam(required = false, name = "filter") String filterStr,
@RequestParam(required = false, name = "range") String rangeStr, @RequestParam(required = false, name="sort") String sortStr) {
//my own helpers - for source: https://github.com/zifnab87/react-admin-java-rest
//FilterWrapper wrapper = filterService.extractFilterWrapper(filterStr, rangeStr, sortStr);
//return filterService.filterBy(wrapper, repo);
}

---

Quelques remarques:

1. Assurez-vous d'importer des Modules: MatTableModule,
   MatPaginatorModule et MatSortModule d'autres modules de la Conception de Matériel.
2. J'ai décidé de remplir resultsLength (total) de la Réponse de l'en-Tête x-total-count qui je remplir par le Ressort de Démarrage @ControllerAdvice. Sinon, vous pouvez obtenir cette information à partir de l'objet renvoyé de EntityService (e.g Page pour le Printemps de Démarrage), bien que cela implique que vous aurez besoin d'utiliser any comme type de retour ou de déclarer les objets de la classe wrapper pour l'ensemble des entités dans votre projet si vous voulez être de "type-safe".

OriginalL'auteur Michail Michailidis

C'est une combinaison de Michail Michaïlidis réponse avec le tableau officiel de la pagination exemple, condensée en un seul fichier, et à l'aide d'un simulacre de "réseau" classe de service retourne un Observables et simule la latence.

Si vous avez un Matériel 2 + Angulaire 5 du projet et en cours d'exécution, vous devriez être en mesure de déposer ce dans un nouveau fichier de composant, de l'ajouter à votre liste de modules, et de commencer le piratage. Au moins, il devrait être une diminution de la barrière à l'entrée pour commencer.

import { ViewChild, Component, Inject, OnInit, AfterViewInit } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import { merge } from 'rxjs/observable/merge';
import { of as observableOf } from 'rxjs/observable/of';
import { catchError } from 'rxjs/operators/catchError';
import { map } from 'rxjs/operators/map';
import { startWith } from 'rxjs/operators/startWith';
import { switchMap } from 'rxjs/operators/switchMap';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Component({
selector: 'app-element-table',
styles: [`
:host mat-table {
display: flex;
flex-direction: column;
min-width: 100px;
max-width: 800px;
margin: 0 auto;
}
`],
template: `
<mat-card>
<mat-card-title>Element List</mat-card-title>
<mat-card-content>
<mat-table #table matSort [dataSource]="elementDataSource" class="mat-elevation-z2">
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef mat-sort-header> No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<mat-header-cell *matHeaderCellDef mat-sort-header> Weight </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</mat-card-content>
<mat-card-content>
<mat-paginator #paginator [length]="resultsLength"
[pageSize]="5"
[pageSizeOptions]="[5, 10, 20]"
showFirstLastButtons>
</mat-paginator>
</mat-card-content>
</mat-card>
`
})
export class ElementTableComponent implements AfterViewInit {
public elementDataSource = new MatTableDataSource<PeriodicElement>();
public displayedColumns = ['position', 'name', 'weight', 'symbol'];
private entities: PeriodicElement[];
private elementService = new ElementService();
resultsLength = 0;
isLoadingResults = false;
isRateLimitReached = false;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
public constructor() {
}
public ngAfterViewInit() {
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({ data: [], resultsLength: 0 } as ElementResult),
switchMap(() => {
this.isLoadingResults = true;
return this.elementService.fetchLatest(
this.sort.active, this.sort.direction,
this.paginator.pageIndex + 1, this.paginator.pageSize);
}),
map(result => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
this.resultsLength = result.resultsLength;
return result.data;
}),
catchError(() => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
return observableOf([]);
})
).subscribe(data => this.elementDataSource.data = data);
}
}
//Simulates server-side rendering
class ElementService {
constructor() { }
fetchLatest(active: string, direction: string, pageIndex: number, pageSize: number): Observable<ElementResult> {
active = active || 'position';
const cmp = (a, b) => (a[active] < b[active] ? -1 : 1);
const rev = (a, b) => cmp(b, a);
const [l, r] = [(pageIndex - 1) * pageSize, pageIndex * pageSize];
const data = [...ELEMENT_DATA]
.sort(direction === 'desc' ? rev : cmp)
.filter((_, i) => l <= i && i < r);
//1 second delay to simulate network request delay
return new BehaviorSubject({ resultsLength: ELEMENT_DATA.length, data }).debounceTime(1000);
}
}
interface ElementResult {
resultsLength: number;
data: PeriodicElement[];
}
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' },
{ position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' },
{ position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' },
{ position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' },
{ position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' },
{ position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' },
{ position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na' },
{ position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg' },
{ position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al' },
{ position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si' },
{ position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P' },
{ position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S' },
{ position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl' },
{ position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar' },
{ position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K' },
{ position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca' },
];

Btw, cette question sur material2 sur le filtrage peut être utile si vous cherchez à mettre en œuvre le filtrage de vous-même.

OriginalL'auteur infogulch