Yalın JavaScript ile sayfalama (pagination) yapımı 👨‍💻

Bir önceki yazımda dinamik ve sıralanabilir tablolar geliştirme üzerine deneyimlerimi paylaşmıştım. Şimdi bir diğer poc tadında yaptığım geliştirmemi sizlerle paylaşmak istiyorum.

Evrene mesaj :) (credit: https://unsplash.com/photos/Yhc7YGZlz3g)

Hürriyet’te bir projede client side işlem yapacak bir sayfalama modülü kodlamam gerekti. Hazır kütüphaneleri, çok yüksek kapasiteli bir şeye ihtiyacım olmadıkça kullanmayı reddeden bir kişiliğim olduğu için, bence bizim sektörün en önemli sorusunu sorarak, “ben olsam nasıl kodlardım?” diyerek giriştiğim demo projemden aşağıdaki satırlarla, bana gelen spekler doğrultusunda başarılı çıktığımı düşünüyorum :)

Şimdi kısaca speklerden bahsedeyim. n tane içeriğinizin olduğunu, bunun her sayfada gösterilecek içerik sayısını yine dinamik bir şekilde belirleyebildiğiniz bir yapı düşünün. Buraya kadar “ee ne var bunda!” vs. diyebilirsiniz.

Burada istenen bir diğer şey ise bu sayfalama öğelerinin sayısı 4'ten fazla olursa(demo projemiz için bu sayı statik) seçili olan sayfa, sonraki sayfa, üç noktalı bir eleman ve en son sayfa şeklinde bir görüntü bekleniyor:

Meşhur pagination

Sonlara yaklaşınca da şöyle bir hal alması bekleniyor:

İlk ve son sayfalara gelince de doğal olarak yönlendirme oklarının çalışmaması, seçili sayfaya tıklandığında işlem yapmaması gibi bazı edge caseler de isterin içerisinde bulunuyordu.

Bu yüzde kod içerisinde minimum düzeyde de olsa if bloklarına girmek zorunda kaldım. Tabii ki bu bir demo, daha iyi hale getirilebilir. Amacım zaten hem paylaşmak, hem de her zaman olabileceği gibi daha iyisi varsa sizlerden duymak. Bu cümleyi egomdan kurmuyorum :)

Şimdi öncelikle çalışan halini bir görelim:

Bu kadar girizgah yeter artık ellerimizi kirletelim:

Öncelikle bu ufak komponentimin bir state’i olmalı ki ona göre render edebilmeliyim:

const pagingOptions = {
  totalCount: 40,// Toplamdaki içerik sayısı
  itemPerPage : 5, // Sayfada kaç adet içerik gösterileceği
  initialPage: 1, // Açılış sayfası (Burası ileride queryStringten okuyacak
  get totalPage () { // Kaç tane sayfa olacağını burada hesaplıyorum
     return Math.ceil(this.totalCount / this.itemPerPage) // Ceil kullanıyorum çünkü küsüratlı bir rakam çıkarsa yukarıya yuvarlamasını istiyorum
  },
  location: ".paging", // Nereye render edileceği
  url : "/api/contents/?id=5a5e47ec7152d929bc6d4280&p=" // Sayfa değiştiğinde istek atacağı api adresi
}

Tüm bunları, sayfa backend tarafından çizilirken erişip fonksiyonumu init edebilirim:

paging.init(pagingOptions);

Diğer yazılarımdan aşina olanlar, tüm methodları olabildiğince böldüğümü bilirler (SOLID prensiplerinden, Single Responsibility).

Method detaylarını eklemeden, objemin kullandığı methodları listelemek istedim. Mesela burada Next ve Prev Clickleri aslında handleItemClick içerisinde handle edip işlem yapabilirdim ancak diyorum ya POC o yüzden geliştirilebilir yerleri muhakkak olacaktır.

Peki detayına girdikçe neler oluyor bir bakalım. Init methodu ile state’i aşağıya taşıyorum. Burası her sayfa değiştiğinde yeniden çağırılacağı için içerik çağırma kısmını da burada yapıyorum. Burada bir diğer iyileştirilecek alan, çağırılan içeriği bir değişkende tutup, append methoduyla doğrudan sayfaya yerleştirebilirdim:

createPaging methoduna gelmeden önce orada kullandığım önemli bir methoddan bahsetmek istiyorum. O da createButton. Bu fonksiyon bazı parametreler alarak her bir beyaz kutucuğu oluşturmama olanak sağlıyor.

Ve son olarak bütün o “çirkin” logicin döndüğü method; createPaging

Burada uzun uzun yazsam kafa karıştıracak koşulları, değişken isimlerini olabildiğince anlaşılır yapıp detaylıca yazdım bakmak isteyen kod kısmından muhakkak göz atsın derim. Ben birkaç tane pagination plugininde bu koşulların başka türlü nasıl çözüldüğüne baktım ancak çok da başka bir yol göremedim. Bu sebeple bu yola başvurdum.

Benim için haftasonu boş vakitlerimde çengel bulmaca niyetine güzel bir işti. Kullandığım yöntemler belki birilerine ilham olur, belki aldığım feedbackler bana ilham olur diyerekten paylaşıp, çoğalmasını istedim.

Ve tabii ki siz de çoğalmasını istiyorsanız, lütfen alkış butonuna ve sosyal mecralarda paylaşma butonlarına bolca tıklayın, elinizi korkak alıştırmayın :)

Bir sonraki yazıda görüşmek dileğiyle,
Murat Doğan