Paginering en sortering beheren

De API geeft zoekresultaten in pagina’s terug. Zo navigeer je efficiënt door grote resultatenreeksen.

Basis-paginering

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

Het antwoord vertelt je dat er in totaal 1.523 resultaten zijn, en dat je pagina 1 bekijkt met 20 items.

Het aantal pagina’s berekenen

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

Volgende pagina laden

// Eenvoudige volgende pagina
currentPage++;
// Of bouw een paginerings-UI
for (let page = 1; page <= totalPages; page++) {
  // Maak een paginaknop
}

Paginaformaat optimaliseren

Kies het paginaformaat op basis van je use case:

Kleine pagina’s (10-20 items):

• Snellere initiële laadtijd

• Goed voor zoeken voor gebruikers

• Er zijn meer API-aanvragen nodig

Grote pagina’s (50-100 items):

• Minder API-aanvragen

• Goed voor batchverwerking

• Langzamere individuele aanvragen

• Maximum is 100 items

Sorteeropties

Populair (standaard):

{
  "order": "popular"
}

Geeft de meest gedownloade bronnen eerst terug. Het beste voor het tonen van hoogwaardige, bewezen content.

Recent:

{
  "order": "recent"
}

Geeft de nieuwste uploads eerst terug. Goed om nieuwe content te ontdekken.

Voorbeeld van infinite scroll

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();
  
  // Voeg resultaten toe aan je UI
  appendResults(data.results);
  
  // Controleer of er nog meer pagina’s zijn
  const totalPages = Math.ceil(data.total / pageSize);
  hasMore = currentPage < totalPages;
  
  currentPage++;
  isLoading = false;
}
// Trigger bij scrollen
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadMore();
  }
});

Tips voor prestaties

• Cache resultaten lokaal om onnodige aanvragen te vermijden

• Gebruik passende paginaformaten voor je use case

• Implementeer laadstatussen voor een betere gebruikerservaring

• Overweeg virtualisatie voor erg grote lijsten

• Haal niet alle pagina’s tegelijk op - laad op aanvraag

Voor meer details, zie de volledige documentatie op api.cathopic.com/docs.