13. Gün – jQuery ile Sayfalama Yapımı

On üçüncü jquery dersimizde yeni bir örnek uygulama hazırlayacağız..
– jQuery ile Sayfalama Yapımı

 

/* Erbilen.NET - jQuery Dersleri */
/* jQuery ile Sayfalama Yapımı*/

// toplam li sayısı
var toplamLi = $("ul#liste li").size();

// sayfa veri sayısı
var veriSayisi = 5;

// Sayfalamayı uygula
$("ul#liste li:gt(" + (veriSayisi - 1) + ")").hide();

// sayfa sayısı bulalım
var sayfaSayisi = Math.round(toplamLi / veriSayisi);

// sayıyı yuvarlayalım
// Sayfa linklerini ekleyelim
for (var i = 1; i <= sayfaSayisi; i++)
{
        $("#sayfalama").append('< a href="javascript:void(0)">' + i + '< /a>');
}

// İlk sayfaya aktif classı ekle
$("#sayfalama a:first").addClass("aktif");

// Sayfalama içindeki a'lardan birine tıklandığında
$(document.body).on("click", "#sayfalama a", function(){
    // indis değerini al (1 fazlası şeklinde)
    var indis = $(this).index() + 1;
    // toplam gözüken veri sayısını bul
    var gt = veriSayisi * indis;
    // aktif class işlemleri
    $("#sayfalama a").removeClass("aktif");
    $(this).addClass("aktif");
    // listedeki tüm lileri gizle
    $("ul#liste li").hide();
    // for ile toplam gözüken veri sayısı - veriSayisi işlemi yap ve veriSayisi kadarını göster
    for (i = gt - veriSayisi; i < gt; i++)
    {
        $("ul#liste li:eq(" + i + ")").show();
    }
});

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“13. Gün – jQuery ile Sayfalama Yapımı” üzerine 55 yorum

  1. Ellerine saglık süper bi ders olmuş. Ama peki ben 10 da durmasini istersem nasil yapıcaz? Sonraki diye bi buton olsun ve ona vuruncada 11-12 diye acilsin. Bunuda anlatırsan süper olur. Önceden teşekkürler

  2. Ders icin teskkurler. Benim bir sorum olacakti. Suanda sayfalari tek e indirdigimizde 13 sayfa gozukuyor, Fakat diyelimki ben sayfalamada 1'den 5'e kadar gozukmesini istiyorum ve 5'e geldigimde bana 6'dan 10'a kadar gitmesini istiyorum ve bu sekilde devam eden bir donguyu nasil olusturabilirim.

  3. Yukarıda vusal'da aynı şeyi sormuş, mantığını oturttuktan sonra sizlerlede paylaşacağım bunu 🙂

  4. Aynen yukaridaki yorumu okumamisim direk soruya yoneldim)) tmmdir tekrardan tesekkurler bekliyor olacagim:)

  5. Şimdi uygulamada sayfa sayısını yuvarlarken Math.round() kullanmıştınız, ama eğer mesela veri sayısı 4 ve li sayısı da 13 olsaydı 3,25 çıkardı ve bu sefer 4 yerine 3'e yuvarlayacağından 4. sayfa ve 13. li'yi göremezdik, bu sorunu nasıl çözebiliriz?

    1. Math.round() ile yuvarlama yaparken 0.5 ve üzerini üst tamsayıya 0.49 ve altını alt tam sayıya yuvarlıyormuş, hersayfadaki ver sayısını 4 isteyince 13. veri görünmüyordu. Math.ceil() kullanınca bu sorun düzeldi. Math.ceil() sayıyı bir üst tamsayıya yuvarlıyor.

  6. merhabalar ben css'e yeni başladım sayılır. Basit taslakları dökebiliyorum fakat daha ileri seviyelerde takılabiliyorum. Yani bazı şeyleri tam olarak nerede kullanıcağımı bilmiyorum. Siz nasıl öğrendiniz? tavsiye ediceğiniz, öğreniceğim, pratik yapabiliceğim bir kitap ya da site var mı? w3school'daki dersleri bitirdim.

  7. teşekkürler tayfun.peki json ile çektiğim verileri bu sayfalama ile nasıl sayfalayabilirim?deniyorum ama olmuyor..

  8. bu sayfalamayı Batuhan'ın Youtube'da anlattığı video ile yaptım, fakat benim sorunum HTML yada PHP site sayfalarını nasıl bu sayfalamaya ekleyebiliriz bunu başamadım bir türlü,Batuhan .htacces öğrenmelisin demişti…Ben sitemin en altında bir sayafalama numaralandırması olsun istiyorum..Yardımcı olabilirmisin Tayfun?

  9. Bunun o ders ile bir alakası yok.. Bu php'yi karıştırmadan zaten sayfada var olan nesneleri düzene sokmak için oluşturabileceğin bir sayfalama örneği sadece..

  10. Dersler suyunu çekince yorumlar artmış. 😀 Teşekkür etme, minnet gösterme alışkanlığı kazanmamız lazım. 🙂

  11. Ben biraz araştırdım ve bu sorunun çözümünü buldum, Math.round() yerine Math.ceil() kullanıldığında her zaman yukarı yuvarlıyor ve bu sayede de 4. sayfa ve 13. li'yi görebiliyoruz.

  12. abi peki script kodlarken sayfalama yapıcağız hangisi daha mantıklı bumu yoksa php ile olanmı ?

  13. çözüm için en iyi yol, php ile veriyi çekip "load" yöntemiyle jquery'e aktarmak, bir sitede buldum örneğini. isteyen olursa adresi buradan yayınlarım, site kurallarına aykırı değilse..

  14. kardeşim eline sağlık güzel bir uygulama olmuş kullanıyorum sayfamda.
    bu sistemi ben bir oylamada kullanmak istiyorum oylamada sık secilince value degerini alınca diger soruya atmasını istiyorum bu konu hakkında yardımcı olurmusun

  15. 10 soruluk bir testim var bu testin her sorusunu 1 sayfaya atıp gönder butonu kullanmadan radiobutton dan şık secilince value degerini post edip diğer soruya gecmesini istiyorum

  16. Suanda sayfalari tek e indirdigimizde 13 sayfa gozukuyor, Fakat diyelimki ben sayfalamada 1'den 5'e kadar gozukmesini istiyorum ve 5'e geldigimde bana 6'dan 10'a kadar gitmesini istiyorum ve bu sekilde devam eden bir donguyu nasil olusturabilirim.

    Boyle bi sorunumuz vardi gecmis zamanda cozumunu bulabildinizmi ?

  17. Hocam anlatımın çok berrak sayende bir sürü şey öğrendim. ogretiyor.com'da da setlerini takip ediyorum. blog dersinden çok faydalandım. Sağolasın. Bir arama motoru dersi de eklersin artık 🙂 bi o eksik

  18. 13. Gün – jQuery ile Sayfalama Yapımı
    bu videodaki mac'de kullandığınız programın adı nedir css editörün ? link varsa bende indirmek isterimde

  19. Elbette, yazılan dil çok önemli değil sonuçta html çıktı veriyor hepsi 🙂 Ve bizimde işimi html çıktı ile.

  20. bende veriSayısı 4 olduğunda sayfalama stabil çalışmıyor diyecektim ama baktım math.ceil çozüyo demişler. bu arada başka bi sıkıntımıda giderdi bu örnek.

    İlmin zekâtı, yüzde yüzdür. İlim ehlinin zekatı; layık olana o ilmi vermek, ilmî meseleleri öğretmektir. Bilen kişiler uzun çalışmalarla öğrendiklerinin tamamını vermekle mükelleftirler.

    Alıntı:http://insanvehayat.com/her-hasadin-bir-zekati-vardir/

    Paylaşımlarınız için teşekkür ederim..

  21. merhaba videolu anlatım için teşekkürler. sormak istediğim bu uygulamada veriler hazır bir şekilde geldi bunu json ile birleştirip verileri ordan çekerek sayfalama işlemini nasıl yapabiliriz? yardımınız için şimdien tesekkurler

  22. Fırat ÖZPINAR,
    Hocam json ile verileri çektikten sonra yine saydırıp aynı işlemi yapacaksınız, herhangi bir fark yoktur.. Veriler sonradan eklense de muhtemelen yinede kaç tane olduğunu alabilirsiniz aynı mantıkla.

  23. Güzel bi ders. çok işime yaradı ellerine sağlık.
    sayfa sayısını math.round yerine math.ceil ile yuvarlamamız daha sağlıklı gibi.

  24. Yine erbilen.net ile javascript bilgimize bir şeyler daha ekledik. Teşekkürler….

  25. yaptım ama bende nerede hata oldu bulamadım mysqlden veri çektim ve while ile yazdırdım. onu sayfalamak için kullanmak istedim ama olmadı..

  26. @caner duman, bu genelde basit yerler için kullanılabilecek bir sayfalamadır.. Eğer php ve mysql kullanacaksanız o zaman php ile sayfalama yapmanız en doğrusu olacaktır zaten, yoksa bir anlamı kalmıyor 🙂 Bunu genelde dom nesneleri üzerinde sayfalama yapmak için kullanabilirsiniz.

  27. Sevgili @Rıza Durman, bu bir dosya paylaşım konusu değil eğitim konusu olduğu için kodları hiç koymasam bile olabilir, çünkü amaç kod paylaşımı değil paylaşılan şeyin nasıl yapıldığıyla ilgili.

  28. Bende sizin kodlardaki live() kullanınca çalışmadı. normal click() metodu sorunsuz çalışıyor. yeni sürümü 1.10.2 kullanıyorum bununla ilgili olabilir mi? Zaten 4. derste de live() metodunu kullanmıştınız. O zaman da çalışmamıştı. hatta farklı jquery sürümlerini denedim. Çalışmadı. Neden olabilir?

  29. Vay canına tam da lazım olduğu sırada tesadüfen buldum.. 😀 süper oldu ya elinize sağlık

  30. çok güzel bir ders te ben yeni başladıgım için yeterince anlamadım

  31. Azerbaycandan sene ehsenler. tesekkur edirem. men jquery biliklerimin cox hissesin senden oyrendim.

  32. Kardeşim senin kadar faydalı bir kiş daha görmedim varya helal olsun sana yanlız kodlar güncel jquery kütüphanesiyle çalışırken hata veriyor bunun çözümü şöyle live medodu kullanımdan kalktığından doalyı bunu yerine on geldi onunla değiştiği zaman bu sorun düzelecektir.

    kolay gelsin iyi çalışmalar

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir