jQuery Sayfalama Uygulamasına Hoşgeldiniz..

Merhaba Arkadaşlar,

Merhaba Arkadaşlar,
Bilalisler.net için yapmış olduğum jquery sayfalama sistemi

sayfalama mantığı kısaca şöyle;

ilk önce sayfalama yapacağımız nesnelerimizin kaç tane olduğunu belirliyoruz.

daha sonra bir limit belirliyoruz bu limit her sayfada kaç materyal gösterileceğini ifade eder.

daha sonra tüm ürünleri gizliyoruz ve belirlediğimiz tane kadar ürünü ekranda gösteriyoruz.

Toplam ürün sayısını limit'e bölerek kaç tane sayfa olacağını belirliyoruz.

Belirlediğimiz sayfa linklerine tıklandığında gösterilecek ürünleri belirliyoruz.

ve butona aktif olduğunda bir class verip aktif oldugunu belli eden özellikler atıyoruz.

jQuery Sayfalama DEMO

Kodlara Geçelim;

$(function(){

var toplamurun = $("ul.urunler li ").size();
// Toplam ürün sayısını buluyoruz.

var limit=3;
// ekranda gözükecek ürün sayısını belirliyoruz

$("ul.urunler li:gt(" + (limit-1)+")").hide();
// limit kadar ürünü ekranda gösteriyoruz. ve diğerlerini gizliyoruz

//sayfa sayisinı buluyoruz
var sayfasayisi=Math.round(toplamurun/limit);

for ( var i = 1 ; i <=sayfasayisi ; i++ ){
$(".sayfalar").append("<a href='javascript:void(0)'>" + i + "</a>");
}// for döngüsü ile sayfaları yazdırıyoruz

$(".sayfalar a:first").addClass("aktif");
// sayfa ilk açıldığında 1.sayfa ürünlerinin gösterildiğini belirtmek için first ile ilk elemana özellik uyguluyoruz

$(".sayfalar a").click(function(){
// tıkladıgımız a tagının hangi sayfa oldugunu bulup o sayfaya gitmesini sağlıyoruz
var index = $(this).index() + 1;
var goster=(index * limit) ;
$("ul.urunler li").fadeOut(200);

$(".sayfalar a ").removeClass("aktif ");
$(this).addClass("aktif");

for ( i = (goster - limit ); i<=goster-1 ; i++){
//for döngüsü ile ürünleri ekranda gösteriyoruz.
// 1. sayfada 3 tane  gözükecekse 1,2,3 gözükür.
//3. sayfada 7,8,9. ürünler gösterilir.
// bu  for döngüsünde aralıkları belirleyerek ürünleri gösteriyoruz
$("ul.urunler li:eq(" + i + ")").delay(200).fadeIn(300);

}

});
});

&nbsp;

Css Kodlarımız

ul.urunler
{
padding:0;
margin:0;
}
ul.urunler li
{
width:auto;
height:auto;
float:left;
margin-left:10px;
background:#366;
padding:5px;
list-style-type:none;
border:1px solid #ddd;
font-family:verdana;
color:#fff;
}

.sayfalar
{
width:300px;
margin-top:10px;
padding:0 20px 20px 20px;
}

.sayfalar a
{
width:300px;
padding:3px 5px 3px 5px;
width:30px;
height:30px;
background:#ddd;
border:1px solid #ccc;
color:#FFF;
margin-right:6px;
text-decoration:none;
border-radius:5px;
}

.sayfalar a.aktif
{
width:300px;
background:#444;
}
.wrapper{height:150px;}

Şimdi ürünlerimizi ve sayfalamanın yapılacağı divleri yerleştirelim;

<div class="wrapper">

<ul class="urunler" style="float:left">
<li><img src="1.jpg" width="128" height="80"><br>#1 Apple</li>
<li><img src="2.jpg" width="128" height="80"><br>#2 Apple</li>
<li><img src="3.jpg" width="128" height="80"><br>#3 Apple</li>
<li><img src="4.jpg" width="128" height="80"><br>#4 Apple</li>
<li><img src="5.jpg" width="128" height="80"><br>#5 Apple</li>
<li><img src="6.jpg" width="128" height="80"><br>#6 Apple</li>
</ul>
</div>

<div class="sayfalar"></div>

DAHA FAZLA UYGULAMA İÇİN BİLALİSLER.NET İNTERNET ADRESİMİ TAKİP EDEBİLİRSİNİZ