Ajax Sayfalama

Posted by admin | Posted in Jquery, Mysql, Php | Posted on 24-12-20092009-12-24T10:31:47Zd-m-Y

4

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ı:

Accordion Proje Download

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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 class="paging">
	<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>

<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-660073-49");
pageTracker._trackPageview();
} catch(err) {}</script>

</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);

Comments (4)

yedincisenol said on 24-12-20092009-12-24T21:37:06Zd-m-Y

Örnek uygulamaya yer verseydin güzel olurdu,emeğine sağlık.
admin said on 25-12-20092009-12-25T15:36:00Zd-m-Y

Örnek uygulama eklenmiştir ;)

merhaba said on 30-01-20102010-01-30T08:51:53Zd-m-Y

merhaba bu sayfalamanın tablo ile olanı varmı. onunla ilgili bir uygulama varsa sizden ricam bana yardımcı olurmusunuz.

mail adresim : eelci@kargokar.com

iyi çalışmalar.
admin said on 30-01-20102010-01-30T21:02:44Zd-m-Y

Tablolu şekildeki örnek eposta adresinize yollanmıştır.
İlginiz için çok teşekkürler…

Write a comment