Do you know How to display more records while scrolling the page down using JQuery and PHP?

If you are familiar with jQuery and PHP, then it is not hard nut to crack.

Have a look on below code and you can do the same. Include JQuery library File:

Include JQuery library File:
<script type=’text/javascript’ src=’http://code.jquery.com/jquery-1.7.2.js’></script>

Create or call using a simple jQuery function in JS file (If you want to make the code separate).

$(window).scroll(function(){
	scrollFunc(); 
});


function scrollFunc()
{
   if($(window).scrollTop() == ($(document).height() - $(window).height())){	  
   
   var offset = $('[id^="dataRow_"]').length; 
   var records = $(".totNum").text();
   
   $(window).unbind("scroll");
   
   if(records != offset){
   
	   $("#loaderImg").html('<img src="images/ajax-loader.gif" />');	   
	   loadMoreRecords(offset); 
	   
   }
   
   }

}


function loadMoreRecords(offset){
	
	// here we call ajax to add more records in our page.
	$.ajax({
	
		type: 'get',
		url: 'loadMyPageRecords.php',
		data: 'offset='+offset,
		
		success: function(data){
		
			$("#loaderImg").html();
			$(".loadData :last").after(data);
			
		},
		
		error: function(data){
		 alert("ajax response error..."+data);
		}
		
		}).done(function(){
		
		$(window).bind("scroll",function(){
			scrollFunc();					
			   
		});
	});	

}

How simple !! Isn’t it?

If you still face any issue, post your comments.