Gérer la pagination et le tri - Centre d’aide

L’API renvoie les résultats de recherche par pages. Voici comment naviguer efficacement dans de grands ensembles de résultats.

Pagination de base

POST /resources
{
  "query": "saints",
  "page": 1,
  "page_size": 20
}
Réponse:
{
  "total": 1523,
  "page": 1,
  "page_size": 20,
  "results": [ ... 20 items ... ]
}

La réponse indique qu’il y a 1 523 résultats au total et que vous consultez la page 1 avec 20 éléments.

Calculer le nombre total de pages

const totalPages = Math.ceil(response.total / response.page_size);
// 1523 / 20 = 76.15 → 77 pages

Charger la page suivante

// Page suivante simple
currentPage++;
// Ou construire l’interface de pagination
for (let page = 1; page <= totalPages; page++) {
  // Créer le bouton de page
}

Optimiser la taille des pages

Choisissez la taille des pages selon votre cas d’usage :

Petites pages (10-20 éléments) :

Chargement initial plus rapide
Adapté à une recherche côté utilisateur
Nécessite davantage de requêtes API

Grandes pages (50-100 éléments) :

Moins de requêtes API
Adapté au traitement par lots
Requêtes individuelles plus lentes
Le maximum est de 100 éléments

Options de tri

Populaire (par défaut) :

{
  "order": "popular"
}

Renvoie d’abord les ressources les plus téléchargées. Idéal pour afficher du contenu de qualité, éprouvé.

Récent :

{
  "order": "recent"
}

Renvoie d’abord les téléchargements les plus récents. Pratique pour découvrir du contenu nouveau.

Exemple de défilement infini

let currentPage = 1;
const pageSize = 20;
let isLoading = false;
let hasMore = true;
async function loadMore() {
  if (isLoading || !hasMore) return;
  
  isLoading = true;
  
  const response = await fetch('https://api.cathopic.com/resources', {
    method: 'POST',
    headers: {
      'x-api-key': apiKey,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      query: 'prayer',
      page: currentPage,
      page_size: pageSize,
      order: 'popular'
    })
  });
  
  const data = await response.json();
  
  // Ajouter les résultats à votre interface
  appendResults(data.results);
  
  // Vérifier s’il y a d’autres pages
  const totalPages = Math.ceil(data.total / pageSize);
  hasMore = currentPage < totalPages;
  
  currentPage++;
  isLoading = false;
}
// Déclencher au défilement
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadMore();
  }
});

Conseils de performance

Mettre en cache les résultats localement pour éviter des requêtes redondantes
Utiliser des tailles de pages adaptées à votre cas d’usage
Implémenter des états de chargement pour une meilleure expérience utilisateur
Envisager la virtualisation pour des listes très longues
Ne pas charger toutes les pages d’un coup : charger à la demande

Pour plus de détails, consultez la documentation complète à api.cathopic.com/docs.