Datatable est un composant JQuery qui fournit divers fonctionalités: pagination, trie, filtre concernant un tableau (grid). C'est un des plus évolué dans son domaine.
Voici l'initialisation du datatable en Javascript. La partie en gras concernant le passage des paramètres côté client au côté serveur.
var samplingsTable = $('#samplingsTable').DataTable({
'bLengthChange': false, //hide 'show entries dropdown
'processing': true,
'serverSide': true,
'pagingType': 'simple_numbers',
'dom': 'Bfrtip',
'ajax': {
'type': 'get',
'url': url,
'data': function(d) {
var current = $('#samplingsTable').DataTable();
d.page = (current != undefined) ? current.page.info().page : 0;
d.size = (current != undefined) ? current.page.info().length : 5;
d.sort = d.columns[d.order[0].column].data + ',' + d.order[0].dir;
d.search = d.search.value;
}
},
'columns': [
{'data': 'compositeId'},
{'data': 'buildDate'},
{'data': 'productTypesName'},
{'data': 'productsName'},
{'data': 'machineName'}
]
});
Niveau serveur, il faut faire le pont du côté serveur à client. Le paramètre draw est un champ utilisé par Datatable.
@GetMapping("samplings")
@ResponseBody
public Map<String, Object> getSamplings(Pageable pageable,
@RequestParam("draw") Integer draw,
@RequestParam(value = "search", defaultValue = "") String search) {
Map<String, Object> data = new HashMap<>();
Page<SamplingsDto> newPage = samplingsService.get(pageable);
data.put("data", newPage.getContent());
data.put("draw", draw);
data.put("recordsTotal", newPage.getTotalElements());
data.put("recordsFiltered", newPage.getTotalElements());
return data;
}
Il y a d'autre façon de procéder. tel que tout faire sur le serveur ou le client. La façon présenté ici est hybride.
Blog sur la conception, développement et le génie logiciel. Divers langages et systèmes d'exploitations sont traités.
Inscription à :
Publier les commentaires (Atom)
Migration d’une application Spring Boot 2.2 vers Spring Boot 4.0 : retour d’expérience concret
En 2019, nous avons développé une application métier basée sur : Java 8 Spring Boot 2.2.7 Gradle 6.6.1 Thymeleaf Boots...
-
Toshiba AC100 est un smartbook. Toshiba est la seule grosse entreprise qui a commercialisé un smartbook, malgré que plusieurs autres en aie...
-
Nous verrons dans cet article comment corrigé le problème Hibernate’s Warning “firstResult/maxResults specified with collection fetch” qui ...
-
À la suite de l'article concernant Automatisation d'interface utilisateur , j'ai reçu différents commentaires relatifs au choix...
Aucun commentaire:
Enregistrer un commentaire