Configuration

	$db_username = 'root';
	$db_password = '';
	$db_name = 'demo';
	$db_host = 'localhost';
	$item_per_page = 5;
	$connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or

die('could not connect to database');

Index Page Code write from here:

Here we wont be generating any pagination links like before, we only need to get total records and break them to page numbers, which we will be using with jQuery.

		include ( "config.inc.php" ) ;
		$results = mysqli_query ( $connecDB , "SELECT COUNT(*) FROM paginate" ) ;
		$get_total_rows = mysqli_fetch_array ( $results ) ; //total records
		//break total records into pages
		$total_pages = ceil ( $get_total_rows [ 0 ] / $item_per_page ) ;


//jQuery included in index.php

" $ ( '#results' ). load ( "fetch_pages.php" , { 'page' :track_click } , function ( ) {track_click ++; } ) ;

//initial data to load use .load function

fetch_pages.php

			include ( "config.inc.php" ) ; //include config file
			//sanitize post value
	$page_number = filter_var ( $_POST [ "page" ] , FILTER_SANITIZE_NUMBER_INT , FILTER_FLAG_STRIP_HIGH ) ;

			//throw HTTP error if page number is not valid

			if ( ! is_numeric ( $page_number ) ) {
			    header ( 'HTTP/1.1 500 Invalid page number!' ) ;
			    exit ( ) ;
			}

			
			//get current starting point of records

			$position = ( $page_number * $item_per_page ) ;

			//Limit our results within a specified range.

	$results = mysqli_query ( $connecDB , "SELECT id,name,message FROM paginate ORDER BY id DESC LIMIT $position, $item_per_page" ) ;

			
			//output results from database

echo '<ul class="page_result">' ;

	while ( $row = mysqli_fetch_array ( $results ) ){
		echo '<li id="item_' . $row [ "id" ] . '"><span class="page_name">' . $row [ "id" ] . ') ' . $row [ "name" ] . '</span><span class="page_message">' . $row [ "message" ] . '</span></li>' ;

	}
	
echo '</ul>' ;

Use jQuery script to load records from fetch_pages.php page and disply all records on index.php. here i write script for it.

$(document).ready(function(){
	var track_click = 0 ;
 //track user click on "load more" button, righ now it is 0 click

	var total_pages = <?php echo $total_pages; ?>;

	$('#results').load("fetch_pages.php", { 'page':track_click }, function() {track_click ++; }); //initial data to load
	 $ (".load_more").click ( function (e ) { 

//user clicks on button
$(this).hide() ; //hide load more button on click

	$('.animation_image').show() ; 

//show loading image

//user click number is still less than total pages
	if(track_click <= total_pages) {

//post page number and load returned data into result element

	$.post('fetch_pages.php', {'page':track_click}, function(data){

	$( ".load_more" ). show( ) ; 

//bring back load more button

	$( "#results" ).append (data) ; 

//append data received from server
//scroll page smoothly to button id

	$( "html, body" ).animate({ scrollTop : $( "#load_more_button" ). offset().top }, 500 );

	//hide loading image
$( '.animation_image' ).hide(); //hide loading image once data is received

			   
track_click++; //user click increment on load button
}).fail(function(xhr, ajaxOptions, thrownError ){ 

//any errors?
alert (thrownError ); 

//alert with HTTP error

$( ".load_more" ).show( ); //bring back load more button

$( '.animation_image' ).hide( ); //hide loading image once data is received

			            } );

//compare user click with page number
if(track_click >= total_pages - 1 ) {

//reached end of the page yet? disable load button

$( ".load_more" ).attr( "disabled" , "disabled" );
}}
}) ;

}) ;