Kuika’nın Pagination elementi, geniş veri setlerini sayfalara bölerek kullanıcı deneyimini iyileştirir. Bu element, tablolar, listeler veya raporlar gibi büyük veri yapılarında sayfa geçişlerini kolaylaştırarak performanslı ve düzenli bir görünüm sağlar.

Web ve mobil uygulamalarda desteklenir.

Kullanım Alanları

• Tablolar → Uzun veri listelerini (örn. faturalar, kullanıcılar) bölmek
• Raporlama → Çok satırlı raporları parçalara ayırmak
• Galeri Görünümleri → Görselleri sayfalara ayırmak
• Liste Görünümleri → Ürün, müşteri veya kayıt listelerini yönetmek

Kullanım Senaryosu – Fatura Listesi (Recent Invoice)

Bir finans yönetimi veya faturalama uygulamasında, kullanıcılar “Recent Invoice” sekmesinde faturalarını liste halinde görüntüler.

• Her sayfada 6 fatura gösterilir.
• Kullanıcı sayfa numaralarına tıklayarak diğer faturalara geçer.
• “Next” veya “Previous” butonlarıyla ileri–geri gezinir.
• Quick Jumper sayesinde doğrudan belirli sayfa numarasına gidilebilir.
• Toplam kayıt sayısı, sayfa başına gösterilen öğe sayısına göre otomatik hesaplanır.

Veri Kaynağı Bağlama

1. Datasources modülüne gidin.

2. Tables > + ikonuna tıklayın, tabloyu InvoicesPaginated adıyla oluşturun.
3. Tablo yapısı:
4. Actions > SQL Actions sekmesinden yeni bir aksiyon oluşturun: GetInvoicesPaginated

SELECT * FROM InvoicesORDER BY Date DESCOFFSET @{(Pagination.Current - 1) * Pagination.PageSize} ROWSFETCH NEXT @{Pagination.PageSize} ROWS ONLY;SELECT COUNT(*) AS Total FROM Invoices;

5. Pagination elementini bu aksiyona bağlayın:

• Page Size → Pagination.PageSize
• Total → Aksiyon sonucundaki toplam kayıt sayısı

UI Design Modülü İşlemleri

1. UI Design modülünde tabloyu (ör. “Recent Invoice”) oluşturun.
2. Altına Pagination elementini sürükleyip bırakın.
3. Properties panelinden aşağıdaki ayarları yapılandırın:
   
   • Total → Aksiyon sonucu
   • Page Size → 6
   • Current → 1
   • Show Quick Jumper → True
   • Show Size Changer → True
   • Size Changer Options → Actions Seçilir. 
   • Selected Border Color → Mavi (#4B7CF3)
   • Show First Page Button / Last Page Button → True

Özelliklerin Senaryo Bağlamında Kullanılması

• Total
  
  • Açıklama: Toplam kayıt sayısını belirler.
  • Örnek: 120 kayıt → 20 sayfa (PageSize=6).
• Page Size
  
  • Açıklama: Her sayfada kaç kayıt gösterileceğini belirler.
  • Örnek: 6 → 6 fatura görüntülenir.
• Current
  
  • Açıklama: Başlangıçta açık olan sayfa.
  • Örnek: 1 → İlk sayfa.
• Show Quick Jumper
  
  • Açıklama: Kullanıcının sayfa numarası yazarak doğrudan geçiş yapmasına izin verir.
• Show Size Changer
  
  • Açıklama: Kullanıcı sayfa başına kayıt sayısını değiştirebilir.
• Show First/Last Page Button
  
  • Açıklama: İlk ve son sayfaya hızlı geçiş sağlar.

Senaryo Adımı Tamamlandığında

• Kullanıcı faturaları sayfalanmış şekilde görür.
• Sayfa numarasına tıkladığında sadece ilgili sayfanın kayıtları yüklenir.
• SQL Action dinamik olarak tetiklenir, performans korunur.
• Quick Jumper ve Size Changer ile kullanıcı deneyimi artar.

Kısıtlamalar

• Total alanı doğru bağlanmazsa sayfa sayısı yanlış hesaplanır.
• Server-side pagination kullanılmadığında büyük veri setlerinde performans düşebilir.

İpuçları ve Best Practices

Sık yapılan hata: Tüm verileri tek seferde çekmek → Performansı düşürür. Her sayfa için ayrı veri çağırın.

• Quick Jumper ve Size Changer, büyük tablolar için önerilir.
• Pagination elementini tablonun alt kısmına yerleştirmek en uygun UX yaklaşımıdır.
• OFFSET + FETCH sorgularını backend tarafında kullanarak performanslı sorgular oluşturun.