För att möjliggöra för användare att navigera mellan olika sidor och visa alla fakturor, implementera paginering med hjälp av URL-parametrar, liknande sökfunktionen.

Tillbaka till projektet

Steg 1

1. Om du navigerar till Pagination-komponenten ser du att det är en klientkomponent. För att undvika att exponera databashemligheter, hämta inte data på klientsidan. Hämta istället data på serversidan och skicka den som en prop till komponenten;
2. I app/dashboard/invoices/page.tsx, importera en ny funktion som heter fetchInvoicesPages och skicka sökfrågan från searchParams som ett argument:
   • fetchInvoicesPages beräknar det totala antalet sidor baserat på sökfrågan. Om det till exempel finns 12 matchande fakturor med 6 per sida, blir det totala antalet sidor 2.
3. Skicka prop:en totalPages till <Pagination/>-komponenten.

Steg 2

1. Navigera till app/ui/invoices/pagination.tsx;
2. Importera hookarna usePathname och useSearchParams;
3. Använd dessa hooks för att hämta aktuell sida och sätta ny sida;
4. Avkommentera koden i denna komponent.

Notera

Din applikation kan tillfälligt sluta fungera eftersom logiken för <Pagination/> ännu inte är implementerad. Vi kommer att arbeta vidare med detta senare.

Steg 3

1. Skapa en ny funktion som heter <Pagination> inuti createPageURL-komponenten;
2. Använd liknande metod som för sökfunktionen, använd URLSearchParams för att sätta det nya sidnumret;
3. Använd pathName för att konstruera URL-strängen;
4. Avkommentera variabeln allPages.

Steg 4

Sista steget – när användaren anger en ny sökfråga är det viktigt att återställa sidnumret till 1. För att göra detta, uppdatera funktionen handleSearch i app/ui/search.tsx.

I praktiken