Vue.js ile Özelleştirilebilir Pagination (Sayfalama) Bileşeni Geliştirme

Bu rehberde ne öğreneceksiniz?

Bu rehberde Vue.js kullanarak dinamik ve tekrar kullanılabilir bir pagination bileşeni geliştireceksiniz.
Amaç, büyük veri setlerinde performansı artırmak ve kullanıcı deneyimini iyileştirmektir.

Bu yapı API istekleriyle uyumlu, esnek ve ölçeklenebilir şekilde tasarlanmıştır.

---

🧠 Teknik Özet

Bu rehber Vue.js ile özelleştirilebilir bir pagination bileşeni geliştirmeyi anlatır.
Problem: Büyük veri listelerinde performans ve gezinme sorunları.
Çözüm: Olay tabanlı, yeniden kullanılabilir bir sayfalama bileşeni.

---

Ön Gereksinimler

• Bilgisayarınızda Node.js ve npm kurulu olmalı
• Vue.js bileşen mantığına temel seviyede hakim olmalısınız

---

1️⃣ Proje ve Dosya Yapısını Kurma

Yeni bir Vue projesi oluşturun veya mevcut projenizi kullanın.

npx @vue/cli create rabisu-sayfalama-ornegi

• Bu komut varsayılan ayarlarla Vue projesi oluşturur.

---

cd rabisu-sayfalama-ornegi

• Bu komut proje dizinine geçiş yapar.

• Ardından src/components klasörü içinde Pagination.vue dosyasını oluşturun.

---

2️⃣ Props Tanımları ve Temel Yapı

1. Pagination bileşeni dışarıdan aldığı verilerle çalışır. Bu sayede her projede tekrar kullanılabilir.

<script>
export default {
  props: {
    gorunurButonSayisi: {
      type: Number,
      default: 3
    },
    toplamSayfa: {
      type: Number,
      required: true
    },
    sayfaBasiKayit: {
      type: Number,
      required: true
    },
    aktifSayfa: {
      type: Number,
      required: true
    }
  }
};
</script>

• Bu kod bileşenin alacağı parametreleri tanımlar.

---

3️⃣ Sayfa Aralığını Hesaplama

1. Tüm sayfaları göstermek yerine yalnızca gerekli aralık gösterilir.

• Bu hesaplama computed özelliklerle yapılır.

computed: {
  baslangicSayfasi() {
    if (this.aktifSayfa === 1) return 1;

    if (this.aktifSayfa === this.toplamSayfa) {
      return this.toplamSayfa - this.gorunurButonSayisi + 1;
    }

    return this.aktifSayfa - 1;
  },
  sayfalar() {
    const aralik = [];

    for (
      let i = this.baslangicSayfasi;
      i <= Math.min(
        this.baslangicSayfasi + this.gorunurButonSayisi - 1,
        this.toplamSayfa
      );
      i++
    ) {
      aralik.push({
        numara: i,
        pasifMi: i === this.aktifSayfa
      });
    }

    return aralik;
  },
  ilkSayfadaMi() {
    return this.aktifSayfa === 1;
  },
  sonSayfadaMi() {
    return this.aktifSayfa === this.toplamSayfa;
  }
}

• Bu yapı aktif sayfaya göre uygun butonları üretir.

---

4️⃣ Olay Yönetimi (Event Handling)

1. Kullanıcı tıklamalarını ana bileşene iletmek için $emit kullanılır.

methods: {
  ilkSayfayaGit() {
    this.$emit('sayfa-degisti', 1);
  },
  oncekiSayfayaGit() {
    this.$emit('sayfa-degisti', this.aktifSayfa - 1);
  },
  sayfayaGit(sayfaNo) {
    this.$emit('sayfa-degisti', sayfaNo);
  },
  sonrakiSayfayaGit() {
    this.$emit('sayfa-degisti', this.aktifSayfa + 1);
  },
  sonSayfayaGit() {
    this.$emit('sayfa-degisti', this.toplamSayfa);
  }
}

• Bu yaklaşım bileşeni API’den bağımsız tutar.

---

5️⃣ Template ve Stil Ekleme

1. Artık bileşeni görünür hale getirebiliriz.

<template>
  <ul class="sayfalama-listesi">
    <li>
      <button @click="ilkSayfayaGit" :disabled="ilkSayfadaMi">İlk</button>
    </li>

    <li>
      <button @click="oncekiSayfayaGit" :disabled="ilkSayfadaMi">Önceki</button>
    </li>

    <li v-for="sayfa in sayfalar" :key="sayfa.numara">
      <button
        @click="sayfayaGit(sayfa.numara)"
        :disabled="sayfa.pasifMi"
        :class="{ aktif: sayfa.pasifMi }"
      >
        {{ sayfa.numara }}
      </button>
    </li>

    <li>
      <button @click="sonrakiSayfayaGit" :disabled="sonSayfadaMi">Sonraki</button>
    </li>

    <li>
      <button @click="sonSayfayaGit" :disabled="sonSayfadaMi">Son</button>
    </li>
  </ul>
</template>

.sayfalama-listesi {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
}

button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.aktif {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

• Bu stil aktif sayfayı net şekilde vurgular.

---

6️⃣ Bileşeni Kullanma

1. Pagination bileşenini ana uygulamada kullanın.

<template>
  <div id="app">
    <Pagination
      :toplamSayfa="20"
      :sayfaBasiKayit="10"
      :aktifSayfa="suankiSayfa"
      @sayfa-degisti="sayfaGuncelle"
    />
    <p>Görüntülenen Sayfa: {&#123; suankiSayfa &#125;}</p>
  </div>
</template>
<script>
import Pagination from './components/Pagination.vue';

export default {
  components: &#123; Pagination &#125;,
  data() {
    return {
      suankiSayfa: 1
    };
  },
  methods: {
    sayfaGuncelle(yeniSayfa) {
      this.suankiSayfa = yeniSayfa;
      console.log('Veriler getiriliyor:', yeniSayfa);
    }
  }
};
</script>

• Bu yapı API entegrasyonuna hazırdır.

---

❓ Sıkça Sorulan Sorular (SSS)

1. Neden tüm sayfalar gösterilmiyor? Tasarım ve performans sorunlarını önlemek için.

2. $emit kullanmak zorunlu mu? Evet. Bileşenin bağımsız kalmasını sağlar.

3. CSS framework’leriyle uyumlu mu? Evet. Bootstrap veya Tailwind kolayca entegre edilir.

---

🎯 Sonuç

Artık Vue.js projeleriniz için modüler bir pagination bileşenine sahipsiniz. Bu yapı performansı artırır ve kullanıcı deneyimini iyileştirir.

Projelerinizi Rabisu Bulut altyapısında güvenle ölçeklendirebilirsiniz. 🚀