File: ajaxPaging.js

/*
 * @version 1.0
 * @author CK
 * @date 22-Feb-2013
 * @desc this javascript function  is used to show a dynamic list has paging.
 * 		 e.g: You have a list of 100 record and you fetch that through
 * 				ajax but now you want to show these records by paging
 *   
 * 
 * 
 */

//----------------you need  jquery for this 

$(document).ajaxStart(function() {
	$('#overlay').show();
	 $('#loadingDiv').show();
	});


$(document).ajaxStop(function() {
	 $('#loadingDiv').hide();
	 $('#overlay').hide();
});

	$(document).ajaxError(function() {
	 alert('Some Error Occurred!');
	});
	
function ajaxPaging(pagename,page,extra,div)
 {
 	var htmlContent='';
 	var divSelector='#'+div;
 	//-----------------on ajax Start
	
	$(divSelector).ajaxStart(function() {	
		 $(this).html();
	 	 $(this).text('loading....'); //you can customize these function to give better effect
	});
	
	//----------------on ajax stop 
	
	$(divSelector).ajaxStop(function() {	
	   	$(this).text('');  //you can customize these function to give better effect
	});
 
 	//----------call start
 	
	jQuery.ajax({
	   type: "POST",
	   url: pagename,
	   data: 'page='+ page+'&extra='+extra,
	   cache: false,
	   async: false,
	   success: function(response){	   
	   htmlContent=response;	
		}
	}).responseText;
	
	//-----------------on ajax Success 
	
	$(divSelector).ajaxSuccess(function() {		
		$(this).html(htmlContent);
	});
	
	//-----------------on ajax Error
	
	$(divSelector).ajaxError(function() {
	 	alert('Some Error Occurred!');
	 	$(this).html('');
	});
}