Pagination listes et tableaux : mode d'emploi

Pourquoi et comment paginer ses listes et tableaux ? Ne pas récupérer des données qui n’ont pas d’utilité immédiate. On vous explique tout !
LouisN.jpg
Louis NOYARETMis à jour le 8 Sept 2023
Pagination listes et tableaux application web tuto

Pagination : la réponse à une problématique de performance

On le constate souvent dans les applications, les pages qui affichent des listes sont les plus lentes à s'afficher et à charger.

Les soucis proviennent généralement du fait que les développeurs ne paginent pas leurs données et envoient tous les résultats en une seule fois.

La pagination pour plus de légèreté côté front et requêtes

Mettre en place une pagination est une bonne pratique pour ne pas surcharger les requêtes HTTP et les réponses. Cela permet aussi de ne pas surcharger le front avec des données inutiles.

Si vous avez un tableau qui peut contenir des centaines de lignes, il est inutile de les charger toutes en même temps.

De plus, vos données peuvent être filtrées. Il est donc inutile d'afficher 50 résultats en sachant que les 5 ou 10 premiers sont souvent les plus pertinents.

C'est donc pour ça que vous avez l'obligation de paginer vos données.

Vous allez y gagner en performance et en temps de chargement.

Exemple de pagination de listes et tableaux : notre tuto

    // exemple de pagination avec linq
    // exemple de bonne conception
    this._dbContext.Utilisateurs
        .Include(u => u.Adresse)
        .Include(u => u.Documents)
        .Include(u => u.Service)
        .Skip(0)
        .Take(10)
        .ToList();

ou

    // exemple de pagination avec spring data
    // exemple de bonne conception
    this._userRepository.findAll(PageRequest.of(0, 10));

ou

    SELECT * FROM utilisateur
    INNER JOIN adresse ON adresse.id = utilisateur.adresse_id
    INNER JOIN document ON document.id = utilisateur.document_id
    INNER JOIN service ON service.id = utilisateur.service_id
    LIMIT 0, 10;

L'impact sur vos requêtes et vos retours de l'APIUne API est un programme permettant à deux applications distinctes de communiquer entre elles et d’échanger des données. peuvent être très importants en termes de temps et d'énergie consommé !

Si vous mettez ça en application et que vous utilisez aussi les DTO, vous aurez des requêtes et des réponses très légères !

Retrouvez notre article sur les DTO !

Maintenant que vous avez mis en place la pagination, vous pouvez aussi mettre en place le tri et les filtres pour vos données.

Attention si vous voulez faire des filtres, ne tombez pas dans la création de filtres avec des tas de données inutiles.

Nous connaissons tous les filtres "Dropdown" qui contiennent des centaines de données et qui sont très lents à charger.

Je vous propose de faire des filtres avec des champs de recherche qui eux peuvent vous afficher et préfiltrer afin d'optimiser encore une fois le chargement des données.

Pour conclure sur la pagination de listes et tableaux

En plus de mettre en place des filtres optimisés et non pas des filtres qui contiennent des centaines de données inutiles, la pagination est une bonne pratique à mettre en place pour optimiser vos requêtes et vos réponses. Pensez-y !