Based on AJAX implementation Click Load More no Refresh load to page _ajax related

First to show you the effect of the picture:

Effect Demo

This example is another way to display pagination, not to hide what is not displayed

The database structure is the same as "Ajax paging"

JavaScript Code

<script type= "Text/javascript" > $ (document). Ready (function () {var track_click =;//track user click on "load 
  More ' button, Righ now it's 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 mo Re 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 the result element $.post (' fetch_pages.php ', {' page ': Track_click The 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>

xml/html Code

<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 
; > Loading...</div> 

fetch_pages.php

PHP code

 <?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 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> '; ?> 

The above content is small to introduce the introduction of AJAX based on the implementation of click Load more without refreshing load to this page, I hope you like.