Paghahandle ng pagination at sorting

Ibinabalik ng API ang mga resulta ng paghahanap sa mga pahina. Narito kung paano mahusay na mag-navigate sa malalaking set ng resulta.

Pangunahing pagination

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

Sinasabi sa iyo ng response na may kabuuang 1,523 na resulta, at tinitingnan mo ang page 1 na may 20 item.

Pagkalkula ng kabuuang bilang ng mga pahina

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

Paglo-load ng susunod na pahina

// Simpleng susunod na pahina
currentPage++;
// O buuin ang pagination UI
for (let page = 1; page <= totalPages; page++) {
  // Gumawa ng button ng pahina
}

Pag-o-optimize ng page size

Piliin ang page size batay sa iyong sitwasyon ng paggamit:

Maliliit na pahina (10-20 item):

• Mas mabilis ang unang pag-load

• Maganda para sa paghahanap na nakikita ng user

• Kailangan ng mas maraming kahilingan sa API

Malalaking pahina (50-100 item):

• Mas kaunting kahilingan sa API

• Maganda para sa batch processing

• Mas mabagal ang mga indibidwal na kahilingan

• Ang maximum ay 100 item

Mga opsyon sa sorting

Popular (default):

{
  "order": "popular"
}

Ibinabalik muna ang mga pinaka-na-download na resources. Pinakamainam para sa pagpapakita ng de-kalidad at napatunayang content.

Kamakailan lang:

{
  "order": "recent"
}

Ibinabalik muna ang pinakabagong mga upload. Maganda para sa pagtuklas ng sariwang content.

Halimbawa ng 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();
  
  // Idagdag ang mga resulta sa iyong UI
  appendResults(data.results);
  
  // Suriin kung may mga susunod pang pahina
  const totalPages = Math.ceil(data.total / pageSize);
  hasMore = currentPage < totalPages;
  
  currentPage++;
  isLoading = false;
}
// I-trigger kapag nag-scroll
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    loadMore();
  }
});

Mga tip sa performance

• I-cache ang mga resulta nang lokal para maiwasan ang paulit-ulit na kahilingan

• Gumamit ng angkop na page sizes para sa iyong sitwasyon ng paggamit

• Ipatupad ang loading states para sa mas magandang UX

• Isaalang-alang ang virtualization para sa napakalalaking listahan

• Huwag kunin ang lahat ng pahina nang sabay - mag-load kapag kailangan

Para sa higit pang detalye, tingnan ang buong dokumentasyon sa api.cathopic.com/docs.