Wednesday 25 July 2018

Load more button in jquery (listing)

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>

No comments:

Post a Comment