Filtrer une colonne d'une datatable pour afficher le nombre de ligne ayant un status
Bonjour, J'ai un problème pour avoir le nombre correct de lignes ayant pour status "OK" par exemple.
Le problème est que le filtrage s'applique partout, et donc si OK est écrit ailleurs, alors même un résultat "KO" apparaitra.
Besoin : Je souhaite que les cases affichent le nombre correct de ligne ayant le status en particulier qui est sélectionné.
En image voici ce qui s'affiche dès le chargement de la page ( c'est à dire que les carrés avec le nombre de ligne ayant le mot "ex : KO" s'affiche directement avec le nombre )
Dans le screen : il n'y a pas de problème, mais si j'avais ecris "ok" dans le champs "details" alors il me l'aurait compté en OK
Alors que je souhaite seulement qu'il compte vis à vis de la colonne "status".
Dans l'ideal je souhaite qu'il compte de cette manière pour les cases, et que dans le champs de filtre que l'utilisateur peut taper, que ça filtre sur toutes les colonnes.
Merci pour l'aide !
J'ai essayé avec ceci sans succès ou alors placé au mauvais endroit.. :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
check-config.component.ts :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132import { Component, OnInit, Injectable, ViewChild, ChangeDetectorRef, Optional, Inject } from '@angular/core'; import { RestApiService } from '../../shared/rest-api.service'; import { NotificationsService } from '../../shared/notifications.service'; import { FormControl } from '@angular/forms'; import { Observable, of, Subscription } from 'rxjs'; import { tap, startWith, debounceTime, switchMap, map, filter, distinctUntilChanged } from 'rxjs/operators'; import {MatPaginator} from '@angular/material/paginator'; import {MatSort} from '@angular/material/sort'; import {MatTableDataSource} from '@angular/material/table'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog'; import { CheckConfigDialogComponent } from './check-config-dialog/check-config-dialog.component'; import { Overlay } from '@angular/cdk/overlay'; @Injectable({ providedIn: 'root' }) @Component({ selector: 'app-check-config', templateUrl: './check-config.component.html', styleUrls: ['./check-config.component.scss'] }) export class CheckConfigComponent implements OnInit { myControl2 = new FormControl(); namespaces = []; displayedColumns: string[] = ['namespacename', 'servicename', 'typeverification', 'status', 'details', 'reportdate', 'action']; dataSource = new MatTableDataSource<any>(); @ViewChild(MatPaginator, {static: false}) paginator!: MatPaginator; @ViewChild(MatSort, { static: false }) sort!: MatSort; totalCount?: number; KO?: number; OK?: number; Solved?: number; constructor(private dataService: RestApiService, private changeDetectorRefs: ChangeDetectorRef, private notification: NotificationsService, public dialog: MatDialog, overlay: Overlay) { } ngOnInit() { this.getAllComponentsConfig(); } btnCategoryClick(val: string) { this.dataSource.filter = val.trim().toLowerCase(); return this.dataSource.filteredData.length; } getAllComponentsConfig(){ this.dataService.getFromApiAllComponentsConfig().subscribe( (res) => { this.dataSource = new MatTableDataSource<any>(res); // LE FILTER QUE J'AI TENTE ETAIT PLACE ICI LE FILTER QUE J'AI TENTE ETAIT PLACE ICI LE FILTER QUE J'AI TENTE ETAIT PLACE ICI LE FILTER QUE J'AI TENTE ETAIT PLACE ICI this.updateDataTable(); }); } updateDataTable(){ this.changeDetectorRefs.detectChanges(); this.dataSource.paginator = this.paginator; this.dataSource.sort = this.sort; this.dataSource.sort.sort({ id: "dateajout", start: 'desc', disableClear: false }); this.totalCount = this.dataSource.data.length; this.OK = this.btnCategoryClick('OK'); this.Solved = this.btnCategoryClick('Solved'); this.KO = this.btnCategoryClick('KO'); } applyFilteringDataTable(filterValue: string){ this.dataSource.filter = filterValue.trim().toLowerCase(); } openDialog(mydata : any) { const dialogConfig = new MatDialogConfig(); dialogConfig.disableClose = true; dialogConfig.autoFocus = true; dialogConfig.disableClose=false; // Permet la fermeture si clique à coté // dialogConfig.height= "100%"; dialogConfig.width = "60%"; dialogConfig.maxWidth = "70%"; dialogConfig.position = { top: '3%' }; dialogConfig.data = { id: mydata.id, namespacename: mydata.namespacename, servicename: mydata.servicename, typeverification: mydata.typeverification, status: mydata.status, details: mydata.details, reportdate: mydata.reportdate }; const dialogRef = this.dialog.open(CheckConfigDialogComponent, dialogConfig); dialogRef.afterClosed().subscribe( data => { // console.log("Dialog output:", data) if (data != undefined && mydata.id === data.id) { mydata.namespacename = data.namespacename; mydata.servicename = data.servicename; mydata.typeverification = data.typeverification; mydata.status = data.status; mydata.details = data.details; mydata.reportdate = data.reportdate; this.putComponentsConfig(data); } } ); } putComponentsConfig(checkconfig: any){ this.updateDataTable(); this.dataService.putToApiComponentsConfig(checkconfig).subscribe((res)=>{ if(res.status == 200){ this.notification.LittleNotification("La modification du CheckConfig a bien été prise en compte", 3000, "success", false, "top-end"); }else{ this.notification.LittleNotification("La modification du CheckConfig est un echec", 3000, "error", false, "top-end"); } // this.datanamespaces = res; // this.TraitementChartNX(); }); } }
check-config.component.html
Code : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
Répondre avec citation
Partager