Home

Load More Data Onclick Using Jquery PHP AJAX

Published on 7th Feb 2018 in PHP

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 dynaic 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.

[caption id="attachment_904" align="aligncenter" width="889"]load more data - PHPCluster load more data - PHPCluster[/caption]

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 insted 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

Share It
Happy Independence Day
Stay Connected
Like Us on Facebook