Web sitelerimizdeki verileri; örneğin arama sonuçlarında, kategorideki verilerde veya yorumlar bölümlerinde sayfalama sistemleri bullanmamız gerekmektedir. Gün geçtikçe bölümlerdeki veri oranları arttıkça sayfaların açılması uzun olabileceği gibi estetik olmayan görüntülerede sebep olabilir. Bu örneğimizde ajax ile sayfalama sistemi yapıyoruz.
Sistemimizde yer alan 24 adet veriyi 5 ‘erli olarak sayfalayacağı. Ajax ile yapamnın en büyük avantajı sayfa değiştirme işlemi yapmıyoruz url’miz hep sabit.
index.html kodları:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gumusluogl.Com</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/quickpager.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.paging").quickPager();
$("ul.paging2").quickPager({pagerLocation:"both"});
});
</script>
<style type="text/css">
ul.paging li,
ul.paging2 li {
padding: 5px;
background:#CCC;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 24px;
color: #fff;
line-height: 1;
margin-bottom: 1px;
}
ul.simplePagerNav li{
display:block;
floaT: left;
font-weight:bold;
padding: 5px;
margin-bottom: 5px;
font-family: georgia;
}
ul.simplePagerNav li a{
color: #333;
text-decoration: none;
}
li.currentPage {
background: #CCC;
}
ul.simplePagerNav li.currentPage a {
color: #fff;
}
table.pageme {
border-collapse: collapse;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<p align="center" style="font-weight:bold; font-size:14px; font-family:'Times New Roman', Times, serif;"> 24 adet veriyi 5'er 5'er sayfalama yaparak uygulamamızı gerçekleştirdik </p>
<ul>
<li>1. veri</li>
<li>2. veri</li>
<li>3. veri</li>
<li>4. veri</li>
<li>5. veri</li>
<li>6. veri</li>
<li>7. veri</li>
<li>8. veri</li>
<li>9. veri</li>
<li>10. veri</li>
<li>11. veri</li>
<li>12. veri</li>
<li>13. veri</li>
<li>14. veri</li>
<li>15. veri</li>
<li>16. veri</li>
<li>17. veri</li>
<li>18. veri</li>
<li>19. veri</li>
<li>20. veri</li>
<li>21. veri</li>
<li>22. veri</li>
<li>23. veri</li>
<li>24. veri</li>
</ul>
</body>
</html>
Yukarıdaki sayfalama sistemimizde yer alan veriler veri tabanından da çekerek aynı sayfalama işlemini yapabiliriz.
quickpager.jquery.js kodları
(function($) {
$.fn.quickPager = function(options) {
var defaults = {
pageSize: 5,
currentPage: 1,
holder: null,
pagerLocation: "after"
};
var options = $.extend(defaults, options);
return this.each(function() {
var selector = $(this);
var pageCounter = 1;
selector.wrap("<div class='simplePagerContainer'></div>");
selector.children().each(function(i){
if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
$(this).addClass("simplePagerPage"+pageCounter);
}
else {
$(this).addClass("simplePagerPage"+(pageCounter+1));
pageCounter ++;
}
});
selector.children().hide();
selector.children(".simplePagerPage"+options.currentPage).show();
if(pageCounter <= 1) {
return;
}
var pageNav = "<div style='clear:both;'></div><ul class='simplePagerNav'>";
for (i=1;i<=pageCounter;i++){
if (i==options.currentPage) {
pageNav += "<li class='currentPage simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
else {
pageNav += "<li class='simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
}
pageNav += "</ul>";
if(!options.holder) {
switch(options.pagerLocation)
{
case "before":
selector.before(pageNav);
break;
case "both":
selector.before(pageNav);
selector.after(pageNav);
break;
default:
selector.after(pageNav);
}
}
else {
$(options.holder).append(pageNav);
}
selector.parent().find(".simplePagerNav a").click(function() {
var clickedLink = $(this).attr("rel");
options.currentPage = clickedLink;
if(options.holder) {
$(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("currentPage");
$(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
}
else {
$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("li.currentPage").removeClass("currentPage");
$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
}
selector.children().hide();
selector.find(".simplePagerPage"+clickedLink).show();
return false;
});
});
}
})(jQuery);
2 Comments
Bu Kodlar Çalışmıyor. Makalede eksiklikler var.
hem jquery-1.3.2.min.js dosyası da eksik
çalışan örnek kodlar http://www.dynamicdrive.com/dynamicindex17/ajaxpaginate/ajaxpagination.zip adresinden indirilebilir
merhaba kardeşim.
makalen için teşekkürler.bende böyle bişi arıyordum.