Bu yazımda, Facebook ve Twitter gibi sosyal mecralardaki sayfalama sistemi olan scrollu aşağıya kaydırarak eski verileri yükleme işleminden bahsedicem. Aslında bu yazıyı yazmamın sebebi, geliştirdiğim bir uygulamada bu sayfalama tarzını kullanırken yaşamış olduğum problem. Fakat ona gelmeden önce bu tarz bir sayfalama işlemi nasıl yapılır görelim.

Öncelikle verilerimizin listeleneceği bir alan oluşturup buna bir id veriyoruz ve verilerimizi bu alan içerisinde listeliyoruz;

<div id="veriler">
    <ul>
        <li id="100">Veri 1</li>
        <li id="99">Veri 2</li>
        <li id="98">Veri 3</li>
        <li id="97">Veri 4</li>
        <li id="96">Veri 5</li>
    </ul>
</div>


Şimdi sıra scriptimizi yazmaya geldi. Öncelikle jquery kütüphanesini sayfamıza dahil ediyoruz;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>


Daha sonra scrollun sayfanın en altına geldiği durumu yakalayıp yeni verilerin yüklenmesini sağlıyoruz;

$(window).on('scroll', function(){
    var scrollHeight  = $(document).height(); // Sayfanın yüksekliğini aldık
    var scrollPosition  = $(window).height() + $(window).scrollTop(); // scrollun pozisyonunu aldık

    if (scrollPosition == scrollHeight) {
        var id = $("div#veriler ul li:last").attr('id'); // Sayfadaki en son kaydın id'sini aldık
        $.ajax({
            url: "sayfalama.php",
            type: "get",
            data: {"id":id},
            success: function(e) {
                $('div#veriler ul').append(e);
            }
        });
    }
});


Yukarıdaki örnekte, önce sayfanın yüksekliğini ve scrollun bulunduğu pozisyonu aldık. Daha sonra scrollun en altta olduğunu tespit etmek için bu değerlerin birbirine eşit olduğu durumu yakalayıp ajax fonksiyonumuzu yazdık. Buna göre, veri listesindeki son elemanın id değerini php dosyamıza gönderdik. Orada bu id'yi alıp kendisinden daha eski son 10 kaydı çekerek geri döndürmemiz gerekiyor. Bu kısım kullandınız web yazılım diline göre (php, .net, vs.) size kaldığından geçiyorum. Dönen veriyi de listemizin sonuna ekliyoruz.


Bu şekilde herşey yolunda gibi görünürken siz de benim yaşadığım problemle karşılaşabilirsiniz. Scroll sayfanın en altına geldiğinde ajax isteği çalışıyor fakat dönen veri sayfaya dahil edilene kadar tekrar ve tekrar çalışmaya devam ediyor. Böylece gönderilen her ajax postundaki son veri id'si aynı olduğundan, yüklenmesi gereken veriler yapılan istek sayısı kadar sayfaya dahil ediliyor. Örneğin her istekte sonraki 10 veriyi çekecek şekilde kurguladığımızı düşünürsek, her istekte aynı 10 veri tekrar tekrar sayfaya dahil oluyor.


Bunu önlemek için scriptimizde aşağıdaki gibi bir değişiklik yapıyoruz;

var loadAgain = true; // Otomatik yükleyici aktif
$(window).on('scroll', function(){
    var scrollHeight  = $(document).height();
    var scrollPosition  = $(window).height() + $(window).scrollTop();

    if (loadAgain == true && scrollPosition == scrollHeight) {
        loadAgain = false; // Otomatik yükleyici pasif
        var id = $("div#veriler ul li:last").attr('id');

        $.ajax({
            url: "sayfalama.php",
            type: "get",
            data: {"id":id},
            success: function(e) {
                loadAgain = true; // Otomatik yükleyici tekrar aktif
                $('div#veriler ul').append(e);
            }
        });
    }
});


Öncelikle otomatik yüklemeyi aktif/pasif yapabilmek için bir değişken yaratıyoruz ve işin başında "true" değerini atıyoruz. Scrollun sayfanın en altında olduğu durumu yakaladığımız if koşuluna otomatik yüklemenin aktif olup olmadığı kontrolünü de ekliyoruz. Eğer aktif ise hemen pasif hale getirip ajax isteğimizi gönderiyoruz. İsteğimizin sonucu döndüğü anda değişkenimize tekrar "true" değerini atıyoruz. Böylece her istekte, sonuç sayfaya dahil edilmeden tekrar istek gönderme problemi giderilmiş oluyor.


Umarım faydalı olmuştur.