Sivutus Vanilla JavaScriptillä

esittely

Kun luot verkkosivustoa tai verkkosovellusta, varsinkin jos niissä on paljon mallipohjainen sisältö (kuten ruudukko tai luettelo luokkaan kuuluvista kohteista) – se on yleensä hyvä idea jaa se sivuille vähentääksesi näytöllä kerralla näkyvien kohteiden määrää.

Tässä artikkelissa opimme toteuttamaan sivutusta web-projekteissamme vanilja-JavaScriptin avulla alusta alkaen.

Tätä artikkelia varten haemme sisällön osoitteesta tätä esimerkki API-vastauksesta. Se sisältää 100 datapistettä, mutta käytämme vain 30:tä ja näytämme näytöllämme 6 viestiä kerrallaan.

Päästä alkuun

Ennen kuin noutamme kaikki vaaditut viestit API:sta selaimen sisäänrakennetun Fetch API:n avulla, meidän on ensin luotava HTML-perusmerkintä, joka täytetään dynaamisesti skriptillämme myöhemmin:

<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>

Haetaan REST API -viestejä

Kuten aiemmin mainittiin, sivutus tarkoittaa sisällön jakamista pienempiin osiin. Se edellyttää, että haet tiedot, päätät, milloin ja miten jaat, lasket sivujen määrän ja näytät sitten osan niistä käyttäjälle. Onneksi taustatoiminto hoitaa yleensä muutamat ensimmäiset tehtävät ja palauttaa asiaankuuluvan sivun, sivujen kokonaismäärän ja sisällön per sivu.

Aloitetaan hakemalla ensin kaikki viestimme ja sitten myöhemmin muutamme tätä niin, että haetaan vain muutama tietopiste sivua kohden:

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();

Tutkitaanpa yllä olevaa koodia nopeasti. Ensinnäkin aloitimme hankkimalla div -elementti, jossa näyttäisimme kaiken sisältömme kautta class nimi, jonka annoimme div. Lopuksi kirjoitimme funktion, joka käsittelee hakutoiminnon.

In fetchPosts() -toimintoa, käytimme Nouda API hakeaksesi viestejä osoitteesta JSON Placeholder posts API, tallenna sitten JSON-tiedot, joihin posts muuttuja ja käytetty innerHTML -ominaisuutta lisätäksesi jokaisen sisällön osaan posts-section kiertämällä niiden läpi.

Tässä vaiheessa olemme onnistuneesti noutaneet kaiken sisältömme.

Aloitetaan ilmoittamalla kolme muuttujaa, jotka ovat kriittisiä sivutuksen toteuttamisessa verkkosivullamme. Ensimmäinen on kuinka monta viestiä haluamme ilmoittaa sivulla, sitten nykyinen sivunumero (1 oletuksena) ja sivujen kokonaismäärä.

Tätä opasta varten annamme sivujen kokonaismäärä kiinteä määrä 30:

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

Edellisessä osiossa olemme näyttäneet kaikki viestit yhdellä sivulla, mutta haluamme näyttää vain kuusi kerrallaan. Siksi olemme asettaneet numberPerPage että 6 jota käytämme nyt säätämään hakutoimintoa niin, että se vain näkyy 6 virkaa.

Se riippuu tietystä toteutuksesta, mutta on laajalle levinnyt käytäntö sallia kyselyparametrien käyttö haettaessa tuloksia API:sta, jolloin voit hakea tietyn sivulla tuloksista. Esimerkiksi käyttämämme mock REST API sallii page ja limit parametrit, joiden avulla voit ladata vain tiettynä aikana näytettävät erät.

Tällä tavalla lataamme vain ne tiedot, jotka haluamme näyttää käyttäjälle! Voimme sitten joko esihataa seuraavan sivun nopeuttaaksemme latausaikaa tai nauttia laskennan nopeudesta, joka saavutetaan lataamalla vain näytettävät tiedot.

Hyödynnämme näitä parametreja muuttamalla hakupyyntöämme:

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();

Yllä olevassa koodissa lisäsimme API-päätepisteeseen kaksi parametria, jotka ovat pageNumber ja viestien määrä sivulla mikä auttaisi meitä jakamaan viestimme useille sivuille ja sitten nämä viestit voidaan nyt näyttää sivunumeron perusteella.

Lisäksi lähdimme sisään pageNumber että fetchPosts() funktio, jotta voimme kutsua tätä funktiota aina, kun sivu muuttuu:

Lisätään nyt sivun alareunassa oleviin sivunavigointipainikkeisiin toimintoja ja laitetaan ne näyttämään sopivaa sisältöä sivunumeron perusteella.

Huomaamme, että merkinnöissä meillä oli osio, joka näyttää sivutuspainikkeet:

<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>

Aiomme nyt lisätä click tapahtumat kullekin painikkeelle niin, että kun niitä napsautetaan, kyseiselle sivulle tarkoitettu sisältö tulee näkyviin.

Toteuttamalla Edellinen Painike

Logiikka tässä on melko yksinkertainen. Meidän tarvitsee vain hakea elementti, joka edustaa edellinen painike, lisää click tapahtumakuuntelija ja näytä sopiva sisältö, kun painiketta napsautetaan:

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

Kun olet lisännyt a click tapahtuman kuuntelija, olemme tarkistaneet, onko nykyinen sivunumero suurempi kuin 1 takaisinsoittotoiminnossa. Jos luku on yhtä suuri tai pienempi kuin 1, näytämme vain nykyisen sisällön. Mutta jos nykyinen sivunumero on suurempi kuin 1 voimme vapaasti vähentää sen arvoa ja kutsua fetchPosts(pageNumber) funktio, jossa uusi sivunumero välitetään argumenttina, mikä näyttää edellisen sivun sisällön.

Toteuttamalla seuraava Painike

Logiikka tässä on täysin sama kuin edellinen -painiketta, vain muutamalla pienellä muutoksella. Tietenkin haemme luetteloelementin luokan kanssa next sijasta prev. Tarkistamme myös, onko nykyinen sivunumero pienempi kuin sivujen määrä johon asetimme 30 manuaalisesti aikaisemmin. Lopulta lisäämme nykyistä sivunumeroa sen pienentämisen sijaan:

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

Yhteenveto

Sisällön jakaminen pienempiin, paremmin hallittaviin osiin, jotka näytetään yksittäin, on erittäin tärkeää aina, kun yrität näyttää tietokantaa tai muuta tietolähdettä verkkosovelluksessasi.

Tässä artikkelissa tarkastelimme, miten sivutus toteutetaan JavaScriptillä tyhjästä ilman ulkoisia kirjastoja ja työkaluja.

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://stackabuse.com/pagination-in-vanilla-javascript/