index.php =>
$rowperpage = 5;
// counting total number of posts
$allcount_query = "SELECT count(*) as allcount FROM signup where type='teacher'";
$allcount_result = mysql_query($allcount_query);
$allcount_fetch = mysql_fetch_array($allcount_result);
$allcount = $allcount_fetch['allcount'];
// select first 5 posts
$query = "select * from signup where type='teacher' order by id DESC limit 0,$rowperpage ";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
//your code here...............you want to show .
}
}
?>
<h1 class="load-more button btn">Load More</h1>
<input type="hidden" id="row" value="0">
<input type="hidden" id="all" value="<?php echo $allcount; ?>">
.js file =>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Load more data
$('.load-more').click(function(){
var row = Number($('#row').val());
var allcount = Number($('#all').val());
var rowperpage = 5;
row = row + rowperpage;
if(row <= allcount){
$("#row").val(row);
$.ajax({
url: 'loadmore.php',
type: 'post',
data: {row:row},
beforeSend:function(){
$(".load-more").text("Loading...");
},
success: function(response){
// Setting little delay while displaying new content
setTimeout(function() {
// appending posts after last post with class="post"
$(".post:last").after(response).show().fadeIn("slow");
var rowno = row + rowperpage;
// checking row value is greater than allcount or not
if(rowno > allcount){
// Change the text and background
$('.load-more').text("No More Result");
$('.load-more').css("background","darkorchid");
}else{
$(".load-more").text("Load more");
}
}, 2000);
}
});
}else{
$('.load-more').text("Loading...");
// Setting little delay while removing contents
setTimeout(function() {
// When row is greater than allcount then remove all class='post' element after 3 element
$('.post:nth-child(5)').nextAll('.post').remove();
// Reset the value of row
$("#row").val(0);
// Change the text and background
$('.load-more').text("Load more");
$('.load-more').css("background","#15a9ce");
}, 2000);
}
});
});
</script>
loadmore.php =>
<?php
//include database configuration file
$row = $_POST['row'];
$rowperpage = 5;
// selecting posts
$query = 'SELECT * FROM signup WHERE type="teacher" order by id DESC limit '.$row.','.$rowperpage;
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
your code here after load more data show.
} ?>
$rowperpage = 5;
// counting total number of posts
$allcount_query = "SELECT count(*) as allcount FROM signup where type='teacher'";
$allcount_result = mysql_query($allcount_query);
$allcount_fetch = mysql_fetch_array($allcount_result);
$allcount = $allcount_fetch['allcount'];
// select first 5 posts
$query = "select * from signup where type='teacher' order by id DESC limit 0,$rowperpage ";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
//your code here...............you want to show .
}
}
?>
<h1 class="load-more button btn">Load More</h1>
<input type="hidden" id="row" value="0">
<input type="hidden" id="all" value="<?php echo $allcount; ?>">
.js file =>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Load more data
$('.load-more').click(function(){
var row = Number($('#row').val());
var allcount = Number($('#all').val());
var rowperpage = 5;
row = row + rowperpage;
if(row <= allcount){
$("#row").val(row);
$.ajax({
url: 'loadmore.php',
type: 'post',
data: {row:row},
beforeSend:function(){
$(".load-more").text("Loading...");
},
success: function(response){
// Setting little delay while displaying new content
setTimeout(function() {
// appending posts after last post with class="post"
$(".post:last").after(response).show().fadeIn("slow");
var rowno = row + rowperpage;
// checking row value is greater than allcount or not
if(rowno > allcount){
// Change the text and background
$('.load-more').text("No More Result");
$('.load-more').css("background","darkorchid");
}else{
$(".load-more").text("Load more");
}
}, 2000);
}
});
}else{
$('.load-more').text("Loading...");
// Setting little delay while removing contents
setTimeout(function() {
// When row is greater than allcount then remove all class='post' element after 3 element
$('.post:nth-child(5)').nextAll('.post').remove();
// Reset the value of row
$("#row").val(0);
// Change the text and background
$('.load-more').text("Load more");
$('.load-more').css("background","#15a9ce");
}, 2000);
}
});
});
</script>
loadmore.php =>
<?php
//include database configuration file
$row = $_POST['row'];
$rowperpage = 5;
// selecting posts
$query = 'SELECT * FROM signup WHERE type="teacher" order by id DESC limit '.$row.','.$rowperpage;
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
your code here after load more data show.
} ?>
