Load More Data Onclick Using Jquery in PHP with AJAX

Now a days Facebook, Youtube and Twitter are using load more data techniques. This provide the features of loading data dynamically using AJAX instead of giving pagination links.

This is very useful techniques because load data without reloading a webpage. Basically AJAX and Jquery are responsible for this dynamic loading of Data.

In this article here we are going to discuss how to load data without refreshing a webpage using jQuery in PHP with AJAX. This technique loads more and more data with the required limit given in it as clicking on load more button.

Let us start the tutorial.
Firstly create table name courses in database.

Database

CREATE TABLE IF NOT EXISTS `courses` (
  `course_id` int(11) NOT NULL AUTO_INCREMENT,
  `course_name` varchar(200) NOT NULL DEFAULT '',
  PRIMARY KEY (`course_id`),
  FULLTEXT KEY `course_name` (`course_name`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1636 ;

JavaScript

Before JavaScript code we have add ajquery library for its functionality. Here we adding jquery.js as shown below. $(document).on(“click”,”.load”,function(){ using this to check click event on Load more button instead of (.live) . Using this var ids= $(this).attr(“id”); getting last data id which fetched to get after that id values.

<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
$(document).ready(function(){

$(document).on("click",".load",function(){

//var ids= $('.vikash:last').attr("id");
var ids= $(this).attr("id");

$(".load").html('<img src="ajax-loader.gif"/>');

$.ajax({
type: 'POST',
url: 'get_moredata.php',
cache:false,
data: {'lastid':ids},

success: function(response){

//appending the result get_moredata page result with div id alldata
  $('#alldata').append(response);
  
  //remove old load more button
  $('#load'+ids).remove();
  
  if(!response)
  {
  $('.vikash').text('No more record to load');
  }
		}
});
});
  
	});
</script>

Index.php

This is the PHP code for display dynamic data form database.

<div class="row" id="alldata">
<?php
include('config.php'); 
$sql= mysql_query("select * from `courses` ORDER BY `course_id` DESC LIMIT 5");
while($rows=mysql_fetch_array($sql))
{?>
<div class="vikash" id="<?php echo  $rows['course_id'];?>">
<?php
echo $lastid= $rows['course_id'];
echo $rows['course_name'];
?>
</div>
<?php
}?>
<div id="load<?php echo $lastid; ?>"><button class="load" id="<?php echo $lastid; ?>" >Load more</button></div>

get_moredata.php

This page is used to get Next result after click on load more button.

<div class="row" id="alldata">
<?php 
include('config.php'); 
if(isset($_POST['lastid']))
{

$lastid = mysql_real_escape_string($_POST['lastid']);
$que= mysql_query("select * from `courses` WHERE `course_id`<'$lastid' ORDER BY `course_id` DESC limit 10");
$count=mysql_num_rows($que);
while($rows=mysql_fetch_array($que))
{?>
<div class="vikash" id="<?php echo  $rows['course_id'];?>"><?php
echo $lastid=$rows['course_id'];
echo $rows['course_name'];

?>
</div>
<?php
}

?>
</div>
<div id="load<?php echo $lastid; ?>"><button class="load" id="<?php echo $lastid; ?>" >Load more</button></div><?php } ?>
</div>

CSS

.vikash{
width:700px;
height:80px;
background-color:pink;
border:1px solid #000;
margin-left:150px;
margin-right:150px;
}
.load {
width: 704px;
height: 50px;
margin-left: 148px;
background-color: burlywood;
font-weight: 900;
}

Demo