صفحه بندی مطالب با استفاده از ajax

سلام . سال نو تون مبارک . در خدمتتون هستم با یه آموزش جذاب و البته ساده ! می خوایم با هم دیگه یه کاری کنیم که وقتی دکمه صفحه بعد یا قبل رو زدیم صفحه لود نشه بلکه از طریق ajax در خواستمون رو ارسال می کنیم . پس با من همراه باشین

اول از هرچیز باید قابلیت javascript رو اگه می خواید از سوریس بیان بلاگ استفاده کنید از قسمت امکانات اختیاری فعال کنید و سپس تکه کد زیر رو در قسمت <head:script></head:script>  قرار دهید

<script src="https://code.jquery.com/jquery-1.8.0.js" integrity="sha256-00Fh8tkPAe+EmVaHFpD+HovxWk7b97qwqVi7nLvjdgs=" crossorigin="anonymous"></script>
	<script type="text/javascript" charset="utf-8">
		jQuery(document).ready(function(){
	
			jQuery('#postPagination a').live('click', function(e){
				e.preventDefault();
				var link = jQuery(this).attr('href');
				jQuery('#content').fadeOut(500).load(link + ' #contentInner', function(){ jQuery('#content').fadeIn(500); });
					
			});
	
		});
	</script>
	<!-- End the jQuery ajax pagination -->

سپس تکه کد زیر رو در هر قسمتی که دوس دارین ajax بشه قرار دهید مثلا بهتره دنبال تگ     <div class="header"> بگردید و تکه کد زیر رو قبل از اون قرار دهید

<div id='content'>
    <div id='contentInner'>

و در پایان باید 2 تا تگ </div>  اضافه کنید اما در کجا؟؟؟

بهتره دنبال </body> بگردین و بالاتر از اون قطعه کد زیر را قرار بدهید

</div>
</div>

تبریک میگم شما توانستید با استفاده از فناوری آژاکسی صفحه بندی خود رو درست کنین

یه نکته رو بزارین بگم اونم اینه که در آژاکس ما از id ها استفاده می کنیم و شما میتونید id هایی ک گذاشتم رو به دلخواه تغیر بدین

 

نمونه نهایی کار رو در اینجا مشاهده کنید imobook.ir

چاکرم_تا آموزش بعدی