<script type="text/javascript"> 
$(document).ready(function() { 
 var track_click = ; //track user click on "load more" button, righ now it is 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 
  if(track_click <= total_pages) //make sure user clicks are still less than 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 to button element 
    $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, ); 
    //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) { 
    alert(thrownError); //alert any HTTP error 
    $(".load_more").show(); //bring back load more button 
    $('.animation_image').hide(); //hide loading image once data is received 
   }); 
   if(track_click >= total_pages-) 
   { 
    //reached end of the page yet? disable load button 
    $(".load_more").attr("disabled", "disabled"); 
   } 
   } 
  }); 
}); 
</script>

<div id="results"></div> 
<div align="center"> 
<button class="load_more" id="load_more_button">load More</button> 
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div> 
</div> 

<?php 
include("conn.php"); 
$item_per_page = 3; 
//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 = mysql_query("SELECT * FROM content ORDER BY id DESC LIMIT $position, $item_per_page"); 
 
//output results from database 
echo '<ul class="page_result">'; 
while($row = mysql_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>'; 
?>