Vanilla JavaScript'te sayfalandırma

Giriş

Bir web sitesi veya web uygulaması oluştururken, özellikle de çok sayıda şablonlu içerik (kılavuz veya bir kategoriye ait öğe listesi gibi) – genellikle iyi bir fikirdir sayfalara böl aynı anda ekranda görünen öğe sayısını azaltmak için.

Bu yazıda, sıfırdan Vanilla JavaScript kullanarak web projelerimizde sayfalandırmayı nasıl uygulayacağımızı öğreneceğiz.

Bu makalenin amacı doğrultusunda, içeriği şuradan alacağız: Re-Tweet örnek API yanıtı. 100 veri noktası içerir, ancak yalnızca 30 veri noktası kullanacağız ve ekranımızda aynı anda 6 gönderi görüntüleyeceğiz.

Başlamak

Tarayıcının yerleşik Getirme API'sini kullanarak API'den gerekli tüm gönderileri getirmeden önce, daha sonra betiğimiz aracılığıyla dinamik olarak doldurulacak temel bir HTML işaretlemesi oluşturmamız gerekir:

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

REST API Gönderilerini Alma

Daha önce de belirtildiği gibi, sayfalandırma tamamen içeriği daha küçük parçalara bölmekle ilgilidir. Verileri getirmenizi, ne zaman ve nasıl bölüneceğine karar vermenizi, sayfa sayısını hesaplamanızı ve ardından bunun bir kısmını kullanıcıya göstermenizi gerektirir. Neyse ki, arka uç işlevi genellikle ilk birkaç görevi halleder ve ilgili sayfayı, toplam sayfa sayısını ve içeriği döndürür Sayfa başına.

Önce tüm gönderilerimizi alarak başlayalım ve daha sonra bunu sayfa başına yalnızca birkaç veri noktasını sorgulayacak şekilde değiştireceğiz:

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

Yukarıdaki kodu hızlıca inceleyelim. Öncelikle şunu almakla başladık. div aracılığıyla tüm içeriğimizi görüntüleyeceğimiz öğe class atadığımız isim div. Son olarak, getirme işlemini yapacak bir fonksiyon yazdık.

içinde fetchPosts() işlevini kullandık, API getir gelen gönderileri almak için JSON Yer Tutucusu API yayınlarıtarafından başvurulan JSON verilerini depolayın. posts değişken ve kullanılan innerHTML her bir içerik parçasını ekleme özelliği posts-section onların içinden geçerek.

Bu noktada, tüm içeriğimizi başarıyla getirdik.

Web sayfamızda sayfalandırmayı uygulamak için kritik olan üç değişkeni bildirerek başlayalım. ilki sayfa başına bildirmek istediğimiz gönderi sayısı, sonra geçerli sayfa numarası (1 varsayılan olarak) ve toplam sayfa sayısı.

Bu rehber için vereceğimiz toplam sayfa sayısı sabit sayıda 30:

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

Önceki bölümde, tüm gönderileri tek bir sayfada görüntülemiştik, ancak her seferinde yalnızca altı tanesini göstermek istiyoruz. Bu nedenle, numberPerPage için 6 şimdi getirme işlemini ayarlamak için kullanacağız, böylece yalnızca görüntüler 6 mesaj var.

Spesifik uygulamaya bağlıdır, ancak API'lerden sonuçlar alınırken sorgu parametrelerinin kullanılmasına izin vermek yaygın bir uygulamadır; Kanal sonuçlardan. Örneğin, kullandığımız sahte REST API, page ve limit yalnızca belirli bir zamanda göstereceğiniz partileri yüklemenize izin veren parametreler.

Bu şekilde sadece kullanıcıya göstermek istediğimiz verileri yüklüyoruz! Ardından, daha hızlı yükleme süresi için bir sonraki sayfayı önceden getirebilir veya yalnızca gösterilecek verileri yükleyerek elde edilen hesaplama hızının keyfini çıkarabiliriz.

Getirme isteğimizi değiştirerek bu parametreleri kullanacağız:

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

Yukarıdaki kodda, iki parametreyi API bitiş noktasına ekledik. pageNumber ve sayfa başına gönderi sayısı Bu, gönderilerimizi birkaç sayfaya ayırmamıza yardımcı olur ve ardından bu gönderiler artık sayfa numarasına göre görüntülenebilir.

Ek olarak, biz de geçtik pageNumber için fetchPosts() böylece sayfa her değiştiğinde bu işlevi çağırabiliriz:

Şimdi sayfamızın alt kısmında bulunan sayfa gezinme butonlarına işlevsellik kazandıralım ve sayfa numarasına göre uygun içeriği göstermelerini sağlayalım.

İşaretlemede, sayfalandırma düğmelerini gösteren bir bölümümüz olduğunu fark edeceğiz:

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

şimdi ekleyeceğiz click olayları her bir düğmeye, böylece tıklandıklarında o sayfa için amaçlanan içerik görünür.

uygulanması Önceki düğme

Buradaki mantık oldukça basit. Tek yapmamız gereken, temsil eden öğeyi almak. önceki düğme, ekle click olay dinleyicisi olarak kaydedin ve düğmeye tıklandığında uygun içeriği gösterin:

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

ekledikten sonra click olay dinleyicisi, mevcut sayfa numarasının şundan büyük olup olmadığını kontrol ettik: 1 geri arama işlevinde. Sayı eşit veya daha küçükse 1, sadece mevcut içeriği göstermeye devam edeceğiz. Ancak geçerli sayfa numarası şundan büyükse: 1 değerini serbestçe azaltabilir ve fetchPosts(pageNumber) argüman olarak iletilen yeni sayfa numarası ile işlev, dolayısıyla önceki sayfanın içeriğini gösterir.

uygulanması Sonraki düğme

Buradaki mantık ile tamamen aynıdır. önceki düğmesi, yalnızca birkaç küçük değişiklikle. Tabii ki, list öğesini sınıfla birlikte alacağız. next yerine prev. Ayrıca, mevcut sayfa numarasının mevcut sayfa numarasından küçük olup olmadığını kontrol edeceğiz. sayfa sayısı ki ayarladık 30 manuel olarak daha erken. Sonunda, mevcut sayfa numarasını azaltmak yerine artıracağız:

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

Sonuç

Web uygulamanızda bir veritabanını veya başka bir veri kaynağını görüntülemeye çalıştığınızda, içeriği tek tek görüntülenen daha küçük, daha yönetilebilir parçalara bölmek çok önemlidir.

Bu yazıda, herhangi bir harici kitaplık ve araç olmadan sıfırdan JavaScript ile sayfalandırmanın nasıl uygulanacağına bir göz attık.

• SEO Destekli İçerik ve Halkla İlişkiler Dağıtımı. Bugün Gücünüzü Artırın.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. Buradan Erişin.
• Kaynak: https://stackabuse.com/pagination-in-vanilla-javascript/