Impaginazione in Vanilla JavaScript

Introduzione

Quando si crea un sito Web o un'applicazione Web, soprattutto se sono dotati di molti modellato content (come una griglia o un elenco di elementi appartenenti a una categoria) – è generalmente una buona idea farlo dividerlo in pagine per ridurre il numero di elementi visualizzati contemporaneamente sullo schermo.

In questo articolo impareremo come implementare l'impaginazione nei nostri progetti web utilizzando JavaScript vanilla da zero.

Ai fini di questo articolo, recupereremo il contenuto da questo esempio di risposta API. Contiene 100 punti dati, ma ne useremo solo 30 e visualizzeremo 6 post alla volta sullo schermo.

Iniziamo

Prima di recuperare tutti i post richiesti dall'API utilizzando l'API Fetch incorporata nel browser, dobbiamo prima creare un markup HTML di base che verrà riempito dinamicamente tramite il nostro script in seguito:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

Recupero dei post dell'API REST

Come accennato in precedenza, l'impaginazione consiste nel suddividere il contenuto in blocchi più piccoli. Richiede di recuperare i dati, decidere quando e come suddividerli, calcolare il numero di pagine e quindi mostrarne una parte all'utente. Per fortuna, la funzionalità di back-end di solito si occupa delle prime attività e restituisce la pagina pertinente, il numero totale di pagine e il contenuto per pagina.

Iniziamo recuperando prima tutti i nostri post e successivamente lo modificheremo per interrogare solo pochi punti dati per pagina:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Esaminiamo rapidamente il codice sopra. Prima di tutto, abbiamo iniziato ottenendo il div elemento in cui mostreremo tutti i nostri contenuti tramite il class nome che abbiamo assegnato al div. Infine, abbiamo scritto una funzione per gestire l'operazione di recupero.

Nel fetchPosts() funzione, abbiamo usato il Fetch API per recuperare i post dal file API dei post segnaposto JSON, quindi memorizza i dati JSON a cui fa riferimento il file posts variabile e utilizzato il innerHTML proprietà per aggiungere ogni parte di contenuto al file posts-section scorrendoli.

A questo punto, abbiamo recuperato con successo tutti i nostri contenuti.

Iniziamo dichiarando tre variabili che sono fondamentali per implementare l'impaginazione all'interno della nostra pagina web. Il primo è il numero di post che vogliamo dichiarare per pagina, Allora l' numero di pagina corrente (1 per impostazione predefinita) e il numero totale di pagine.

Per questa guida daremo il numero totale di pagine un numero fisso di 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

Nella sezione precedente, abbiamo visualizzato tutti i post su una singola pagina, ma vogliamo mostrarne solo sei alla volta. Pertanto, abbiamo impostato il numberPerPage a 6 che ora useremo per regolare l'operazione di recupero in modo che venga solo visualizzata 6 post.

Dipende dall'implementazione specifica, ma è pratica diffusa consentire l'utilizzo di parametri di query durante il recupero dei risultati dalle API, che consentono di recuperare un determinato pagina dei risultati. Ad esempio, la finta API REST che stiamo utilizzando consente il page ed limit parametri che ti consentono di caricare solo i batch che mostrerai in un determinato momento.

In questo modo, carichiamo solo i dati che vogliamo mostrare all'utente! Possiamo quindi pre-caricare la pagina successiva per un tempo di caricamento più rapido o goderci la velocità di calcolo ottenuta caricando solo i dati da mostrare.

Utilizzeremo questi parametri modificando la nostra richiesta di recupero:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Nel codice precedente, abbiamo aggiunto i due parametri all'endpoint API che sono the pageNumber e la numero di post per pagina che ci aiuterebbe a suddividere i nostri post in più pagine e quindi questi post possono ora essere visualizzati in base al numero di pagina.

Inoltre, abbiamo anche superato il pageNumber Vai all’email fetchPosts() funzione in modo che possiamo chiamare questa funzione ogni volta che la pagina cambia:

Aggiungiamo ora funzionalità ai pulsanti di navigazione della pagina nella parte inferiore della nostra pagina e facciamo in modo che visualizzino il contenuto appropriato in base al numero di pagina.

Noteremo che nel markup avevamo una sezione che mostrava i pulsanti di impaginazione:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

Ora stiamo per aggiungere click eventi a ciascun pulsante in modo che, quando vengono cliccati, appaia il contenuto previsto per quella pagina.

L'implementazione di Precedente Pulsante

La logica qui è piuttosto semplice. Tutto quello che dobbiamo fare è recuperare l'elemento che rappresenta il pulsante precedente, Aggiungi il click listener di eventi ad esso e mostrare il contenuto appropriato quando si fa clic sul pulsante:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

Dopo aver aggiunto un file click listener di eventi, abbiamo verificato se il numero di pagina corrente è maggiore di 1 nella funzione di richiamata. Se il numero è uguale o minore di 1, continueremo a mostrare i contenuti correnti. Ma se il numero di pagina corrente è maggiore di 1 possiamo decrementare liberamente il suo valore e chiamare the fetchPosts(pageNumber) funzione con il nuovo numero di pagina passato come argomento, mostrando quindi il contenuto della pagina precedente.

L'implementazione di Avanti Pulsante

La logica qui è completamente la stessa del file precedente pulsante, con solo alcune piccole modifiche. Ovviamente recupereremo l'elemento list con la classe next invece di prev. Inoltre, verificheremo se il numero di pagina corrente è inferiore a numero di pagine che ci siamo prefissati 30 manualmente prima. Alla fine, incrementeremo il numero di pagina corrente invece di decrementarlo:

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

Conclusione

La suddivisione del contenuto in blocchi più piccoli e più gestibili che vengono visualizzati singolarmente è fondamentale ogni volta che si tenta di visualizzare un database o qualsiasi altra origine dati sulla propria applicazione Web.

In questo articolo, abbiamo dato un'occhiata a come implementare l'impaginazione con JavaScript da zero, senza librerie e strumenti esterni.

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://stackabuse.com/pagination-in-vanilla-javascript/