Angular generic data table with list, sort, pagination, search on backend API (with generic API DAO)
DaoGeneric contient principalement la fonction list() qui construit la requête qui sera envoyée au backend API
Format de l'URL construite pour la liste : (il est possible de modifier ces différents paramètres en surchargeant _getPagination(), _getSorting() et _getParams()
- pour la pagination : &limit=n&offset=m
- pour le sort : &ordering=[-]champ le - fait un tri desc
- pour le search : &search=txt
Exemple : https://mondomaine/api/projets/?limit=20&offset=5 : renvoie les 20 projets, en commençant au 5ème
Format de retour de la liste :
L'objet ramené est de type Pagination :
Pagination {
total: number; // total des éléments en base (par exemple, 1 000 projets)
totalView: number; // total de la pagination (par exemple, 20 projets)
list: any[]; // liste des éléments ramenés
}Lors de l'implémentation de DaoGeneric (generic.dao.ts), il est possible de surcharger 3 méthodes supplémentaires pour modifier les paramètres querystring envoyés
_getSorting(): HttpParams : la construction pour le tri
_getPagination(): Pagination : la construction pour la pagination
_getParams(): HttpParams : la construction pour la recherche et la paginationExemple d'utilisation :
user.model.ts
export interface User {
nom: string;
prenom: string;
};user.service.ts
import {User} from "./user.model";
@Injectable()
export class UserService extends DaoGeneric<User> {
private url = `${environment.baseUrl}/user/`;
constructor(private httpClient: HttpClient) {
super(httpClient);
}
getRootUrl(): string {
return this.url;
}
}myapp.component.html
<app-data-table
[dataSource]="ds"
[extraParams]="extraParams"
[filterDisplay]="true"
[placeHolderFilter]="'Rechercher par ...'"
[toolTipFilter]="'Rechercher par ...'"
[flexAction]="5" [flexColumn]="90"
[pageSize]="10" [pageSizesList]="[5,10,25]"
[columns]="columns" [actions]="actions">
</app-data-table>myapp.component.ts
@Component({
selector: 'app-my-component',
templateUrl: './myapp.component.html'
})
export class MyComponent implements OnInit {
ds: MatDataSourceGeneric<User> = new MatDataSourceGeneric<User>();
extraParams: Map<string, string> = new Map<string, string>();
@ViewChild(DataTableComponent) dataTable: DataTableComponent;
columns: ColumnDataTable[] = [
{ columnDef: 'nom', header: 'Nom', display: (element: User) => {
return user.nom;
} , sort: true, hidden: false, flex: 15 },
{ columnDef: 'prenom', header: 'Prénom', display: (element: User) => {
return user.prenom;
} , sort: true, hidden: false, flex: 15 },
];
actions: ActionDataTable[] = [
{ label: 'Supprimer', tooltip: 'Supprimer l\'utilisateur', icon: 'delete',
click: (row) => this.delete(row), flex: 3, }
];
constructor(private userSvc: UserService) {
this.ds.daoService = userSvc;
}
delete(row: User) {
//
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent