Lapozás és rendezés kezelése

Az API a keresési találatokat lapokban adja vissza. Így navigálhatsz hatékonyan a nagy találati listák között.

Alapvető lapozás

POST /resources
{
  "query": "saints",
  "page": 1,
  "page_size": 20
}
Válasz:
{
  "total": 1523,
  "page": 1,
  "page_size": 20,
  "results": [ ... 20 találat ... ]
}

A válasz megmutatja, hogy összesen 1 523 találat van, és éppen az 1. oldalt nézed 20 találattal.

Az összes oldalszám kiszámítása

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

Következő oldal betöltése

// Egyszerű következő oldal
currentPage++;
// Vagy lapozó felület felépítése
for (let page = 1; page <= totalPages; page++) {
  // Lap gomb létrehozása
}

Az oldalméret optimalizálása

Válassz oldalméretet a felhasználási eseted alapján:

Kis oldalak (10-20 találat):

• Gyorsabb kezdeti betöltés

• Jó felhasználói felületi kereséshez

• Több API-kérés szükséges

Nagy oldalak (50-100 találat):

• Kevesebb API-kérés

• Jó kötegelt feldolgozáshoz

• Lassabb egyedi kérések

• Maximálisan 100 találat

Rendezési lehetőségek

Népszerű (alapértelmezett):

{
  "order": "popular"
}

Először a legtöbbször letöltött erőforrásokat adja vissza. A legjobb a magas minőségű, bevált tartalmak megjelenítéséhez.

Legutóbbi:

{
  "order": "recent"
}

Először a legújabb feltöltéseket adja vissza. Jó a friss tartalmak felfedezéséhez.

Végtelen görgetés példa

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();
  
  // Eredmények hozzáadása a felhasználói felülethez
  appendResults(data.results);
  
  // Ellenőrzés, hogy vannak-e még oldalak
  const totalPages = Math.ceil(data.total / pageSize);
  hasMore = currentPage < totalPages;
  
  currentPage++;
  isLoading = false;
}
// Betöltés indítása görgetéskor
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadMore();
  }
});

Teljesítmény-tanácsok

• Cache-eld a találatokat helyben, hogy elkerüld a felesleges kéréseket

• Használj a felhasználási esetedhez illő oldalméreteket

• Alkalmazz betöltési állapotokat a jobb felhasználói élményért

• Nagyon nagy listáknál fontold meg a virtualizációt

• Ne tölts le egyszerre az összes oldalt – csak igény szerint

További részletekért lásd a teljes dokumentációt itt: api.cathopic.com/docs.