Pagination und Sortierung handhaben - Hilfecenter

Die API gibt Suchergebnisse in Seiten zurück. So navigieren Sie effizient durch große Ergebnislisten.

Grundlegende Pagination

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

Die Antwort zeigt Ihnen, dass es insgesamt 1.523 Ergebnisse gibt und Sie Seite 1 mit 20 Einträgen ansehen.

Gesamtseiten berechnen

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

Nächste Seite laden

// Einfache nächste Seite
currentPage++;
// Oder Pagination-UI aufbauen
for (let page = 1; page <= totalPages; page++) {
  // Seiten-Schaltfläche erstellen
}

Seitengröße optimieren

Wählen Sie die Seitengröße entsprechend Ihrem Anwendungsfall:

Kleine Seiten (10-20 Einträge):

Schnelleres anfängliches Laden
Gut für nutzerseitige Suche
Mehr API-Anfragen erforderlich

Große Seiten (50-100 Einträge):

Weniger API-Anfragen
Gut für Stapelverarbeitung
Langsamere einzelne Anfragen
Maximum sind 100 Einträge

Sortieroptionen

Beliebt (Standard):

{
  "order": "popular"
}

Gibt zuerst die am häufigsten heruntergeladenen Ressourcen zurück. Am besten, um qualitativ hochwertige, bewährte Inhalte anzuzeigen.

Neueste:

{
  "order": "recent"
}

Gibt zuerst die neuesten Uploads zurück. Gut, um frische Inhalte zu entdecken.

Beispiel für unendliches Scrollen

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();
  
  // Ergebnisse zur UI hinzufügen
  appendResults(data.results);
  
  // Prüfen, ob es weitere Seiten gibt
  const totalPages = Math.ceil(data.total / pageSize);
  hasMore = currentPage < totalPages;
  
  currentPage++;
  isLoading = false;
}
// Beim Scrollen auslösen
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadMore();
  }
});

Tipps zur Performance

Ergebnisse lokal cachen, um redundante Anfragen zu vermeiden
Passende Seitengrößen für Ihren Anwendungsfall verwenden
Ladezustände implementieren, um die Nutzererfahrung zu verbessern
Bei sehr großen Listen Virtualisierung in Betracht ziehen
Nicht alle Seiten auf einmal abrufen – bei Bedarf laden

Weitere Details finden Sie in der vollständigen Dokumentation unter api.cathopic.com/docs.