Ajax Sayfalama (Paging)

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 &amp;amp;&amp;amp; 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 thoughts on “Ajax Sayfalama (Paging)

Bir Cevap Yazın

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