Merhaba, bu yazıda genelde haber sitelerinde karşılaştığımız metin başlıklarını sayfalama sisteminden bahsedeceğim. Örneğin, aynı kategoriye ait onlarca haberi aynı anda göstermek yerine belli sayıda gruplayarak göstermek daha hoş olabilir. Bunu, hem Javascript hem de PHP kullanarak yapacağız. Öncelikle kullanacağımız Javascript kodunu paylaşmak istiyorum ;
function goster(baslangic,bitis,tum){
var i;
var iz;
for(i=1; i<=tum; i++){
document.getElementById(i).style.display="none";
}
for(iz=baslangic; iz<=bitis; iz++){
document.getElementById(iz).style.display="block";
}
}
</script>
Bu javascript fonksiyonunu öncelikle body bölümünde çalıştırmamız gerek. Mantık şu; öncelikle listelenen her bir veriye bir id veriyoruz. Sayfa ilk yükleme esnasında bu id'lere sahip elementlerin hepsini gizliyoruz.
$sayfacek=mysql_query("select * from sayfalar ");
$num=mysql_num_rows($sayfacek);
?>
<body onload="goster('1', '<?php if($num<10){ print $num; } else { print "10"; }?>', '<?php print $num;?>')">
Fonksiyonun 3 adet argümanı var. Başlangıç id'si, bitiş id'si ve toplam id sayısı.
Aşağıda PHP ile bilndik şekilde verilerimizin tamamını listeliyoruz.
$say=1;
print " <div style=\"width:380px; height:300px;\"> ";
while ($oku=mysql_fetch_assoc($sayfacek)){
print " <div style=\"width:380px; height:30px; float:left;\" id=\"$say\" ><a href=\"?sayfaid=$oku[id]\"> $oku[baslik] </a></div>";
$say++ ;
}
print " </div> ";
?>
Javascript fonksiyonunu kullanmadığımız takdirde veritabanında ne kadar sayfa varsa hepsi ekrana bastırılır. Aslında fonksiyonu kullandığımızda bile bütün veriler tarayıcı tarafından okunuyor. Tek farkı , kullanıcıya gösterilecek verileri biz fonksiyon ile belirliyoruz. Eğer veri sayımız gerçekten çok ise, sayfanın çalışma zamanını biraz çoğaltabilir bu uygulama. Yukarıdaki kod bloğunun altına aşağıdaki bölümü eklememiz gerekiyor.
$bol=$num/10; if($num%10!=0){ $bol++; }
$baslangic=1;
$bitis=10;
for($k=1; $k<=$bol; $k++){
if($bitis>$num){ $bitis=$num; }
print "<div style=\" width:16px; height:16px; float:left; margin:0 5px 0 0; text-align:center; cursor:pointer;\" onclick=\"return goster('$baslangic','$bitis','$num'); \" >$k</div>";
$baslangic=$baslangic+10;
$bitis=$bitis+10;
}
Scripti bu haliyle denedim ve başarılı bir şekilde çalışıyor. Siz de bu scripti kendinize göre değiştirip yayımlayabilirsiniz. Yayımlarken lütfen kaynak gösteriniz.
%58
%42 %60
%40 %59
%41 %48
%52 %51
%49Sayfa : 1
