Load more button in jquery (listing)
$rowperpage = 6;
$allcount = $allcount_fetch['allcount']; // all record
<div class="post" id="post_(parameter)">
content here
</div>
<input type="hidden" id="row" value="0">
<input type="hidden" id="all" value="<?php echo $allcount; ?>">
<section class="blog_posts_view">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<button type="button" class="btn hvr-bounce-to-right load-more">view more</button>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function(){
$('.load-more').click(function(){
var row = Number($('#row').val());
var allcount = Number($('#all').val());
row = row + 6;
if(row <= allcount){
$("#row").val(row);
$.ajax({
url: 'getData.php',
type: 'post',
data: {row:row},
beforeSend:function(){
$(".load-more").text("Loading...");
},
success: function(response){
setTimeout(function() {
$(".post:last").after(response).show().fadeIn("slow");
var rowno = row + 6;
if(rowno > allcount){
$('.load-more').css("display","none");
//$('.load-more').text("Hide Post");
// $('.load-more').css("background","darkorchid");
}else{
$(".load-more").text("View more");
}
}, 2000);
}
});
}else{
$('.load-more').text("Loading...");
setTimeout(function() {
$('.post:nth-child(6)').nextAll('.post').remove().fadeIn("slow");
$("#row").val(0);
$('.load-more').text("View more");
$('.load-more').css("background","#15a9ce");
}, 2000);
}
});
});
</script>
$rowperpage = 6;
$allcount = $allcount_fetch['allcount']; // all record
<div class="post" id="post_(parameter)">
content here
</div>
<input type="hidden" id="row" value="0">
<input type="hidden" id="all" value="<?php echo $allcount; ?>">
<section class="blog_posts_view">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<button type="button" class="btn hvr-bounce-to-right load-more">view more</button>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function(){
$('.load-more').click(function(){
var row = Number($('#row').val());
var allcount = Number($('#all').val());
row = row + 6;
if(row <= allcount){
$("#row").val(row);
$.ajax({
url: 'getData.php',
type: 'post',
data: {row:row},
beforeSend:function(){
$(".load-more").text("Loading...");
},
success: function(response){
setTimeout(function() {
$(".post:last").after(response).show().fadeIn("slow");
var rowno = row + 6;
if(rowno > allcount){
$('.load-more').css("display","none");
//$('.load-more').text("Hide Post");
// $('.load-more').css("background","darkorchid");
}else{
$(".load-more").text("View more");
}
}, 2000);
}
});
}else{
$('.load-more').text("Loading...");
setTimeout(function() {
$('.post:nth-child(6)').nextAll('.post').remove().fadeIn("slow");
$("#row").val(0);
$('.load-more').text("View more");
$('.load-more').css("background","#15a9ce");
}, 2000);
}
});
});
</script>
No comments:
Post a Comment