Angulaire 2 matériau de la mise en œuvre de tri, de filtre et de la pagination
Je suis en train de mettre en œuvre de tri, de filtre et de la pagination à l'aide de md-table.
voici mon code:
connect(): Observable<Patient[]> {
const displayPatientDataChanges = [
this._patientDatabase.dataChange,
this._filterPatientChange,
this._paginator.page,
this._sort.mdSortChange,
];
return Observable.merge(...displayPatientDataChanges).map(() => {
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
let displayData = this._patientDatabase.data.slice().filter((item: Patient) => {
let searchStr = (item.firstname + ' ' + item.lastname).toLowerCase();
return searchStr.indexOf(this.filter.toLowerCase()) != -1;
});
Je veux retourner à la fois de ces valeurs, mais il retourne uniquement la fonction de tri, filtre et la pagination ne fonctionne pas.
return displayData.splice(startIndex, this._paginator.pageSize),this.getSortedData();
});
}
disconnect() { }
getSortedData(): Patient[] {
const data = this._patientDatabase.data.slice();
if (!this._sort.active || this._sort.direction == '') { return data; }
return data.sort((a, b) => {
let propertyA: number|string|Date = '';
let propertyB: number|string|Date = '';
switch (this._sort.active) {
case 'id': [propertyA, propertyB] = [a.id, b.id]; break;
case 'firstname': [propertyA, propertyB] = [a.firstname, b.firstname]; break;
case 'lastname': [propertyA, propertyB] = [a.lastname, b.lastname]; break;
case 'dateOfBirth': [propertyA, propertyB] = [a.dateOfBirth, b.dateOfBirth]; break;
case 'sex': [propertyA, propertyB]= [a.sex, b.sex]; break;
case 'dateAdded': [propertyA, propertyB] = [a.dateAdded, b.dateAdded]; break;
}
let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : 1);
});
}
Comment puis-je faire le tri, de filtre et la pagination de travail?
Vous devez vous connecter pour publier un commentaire.
Modifier sur 01/29/2018 : un article à propos de la fiche de données de table a été écrite et peut être vu ici, il comprend le serveur de la pagination, de tri et de filtrage et est probablement le plus up-to-date que mon code ci-dessous, puisque beaucoup de gens sont dans ce post, je pense qu'il y a un réel besoin pour ce, j'espère que ça aidera à vous tous, amusez-vous.
Modifier: le plunkr exemple ne fonctionne plus donc je ré-implémenté sur stackblitz avec les dernières version (de cette édition, beta 12)
remarque : si vous utilisez une ancienne version de matériel dont vous aurez besoin pour changer le
mat
préfixes retour àmd
Voici la version mise à jour
Ce plunkr exemple (ne fonctionne plus, voir le lien ci-dessus pour une version de travail) va vous montrer le tableau avec toutes les implémentations vous êtes à la recherche pour.
Vous pouvez voir comment il est mis en œuvre avec l'injection de dépendance :
La
Observable.merge(...displayDataChanges).map
filtres de données, de l'sortData()
méthode à les trier et à les paginator génère le nombre de pages en fonction de la longueur des données filtrées.UserDatabase
's du constructeur et de l'appeler dans laaddUsers
méthode commethis.myService.getUsers().subscribe( res => { this.usersData.push(...res.data) this.dataChange.next(this.usersData) }
Error: (SystemJS) XHR error (404) loading https://unpkg.com/@angular/cdk/bundles/cdk.umd.js/portal
app.module
, dans la liste de vos@angular/material
importations de vérifier queMatPaginatorModule
est là.C'est ce que l'utilisation de la pagination et de tri :
JS:
CSS:
HTML: