Infinite scrolling with ajax paging (After some scroll show pagination)

Question

Infinite scroll should stop after 10 rows of records. If there are more records, ajax pagination should be displayed. For example, consider this infinite scrolling example.
So after 20 records I want to display pagination and same should be done on next page. Please let me know if you have any of this ideas or solution.

Here is my code on which I am working:

    //On doMouseWheel = 1 I have taken the currentdealoffset value and check it with the total no of deals present
    //If count is less, then simply calculating the window position displaying the allotted records say 10
    //On next scroll just doing the same process and fetching records using ajax until end of the deals
    //Now the problem is I am not able to code a logic where after say 10 records show a pagination and 
    //When click on next page the same process should be managed by fetching the offset count of scrol and offset of pagination bar

    doMouseWheel = 1 ;   

            $(window).scroll(function() { 
            if($('#facebox_overlay').is(':visible')==false){                
            $('#endofdeals').show();
            $('#endofdeals').html("<center><img src='"+SITEIMG +"ajax-loader_1.gif' ><center>");
            //console.log("Window Scroll ----");
            var currentdealoffset = 0; //alert(currentdealoffset);
            var currentdealoffset = parseInt(document.getElementById("countval").value); //alert(currentdealoffset);
            var displaymode = parseInt($('#displaymode').val()); 
            var totalcountdeal = parseInt($('#totaldeals').val()); //alert(totalcountdeal);
            if(currentdealoffset<totalcountdeal){
            if (!doMouseWheel)  {
            return ;
            } ;

            var distanceTop = $('#last').offset().top - $(window).height();        
                    if  ($(window).scrollTop() > distanceTop){
            //console.log("Window distanceTop to scrollTop Start");
            doMouseWheel = 0 ; 
                    $('div#loadMoreComments').show(5000);
                    //console.log("Another window to the end !!!! "+$(".postedComment:last").attr('id'));        

                    $.ajax({
                    type : 'POST',
                    dataType : "html",
                    data: {
                    typeday : $('#remdumtype').val(),                        
                    catid : $('#catid').val(),                        
                    },
                    url: "<?php echo https_url($this->config->item('base_url'))?>popup/dealsearch",
                    success: function(html) {
                    doMouseWheel = 1; 
                    if(html){
                    if(displaymode==12)
                    $('#listTable tr:last').after(html);
                    else
                    $("#postedComments").append(html);
                    //console.log("Append html--------- " +$(".postedComment:first").attr('id'));
                    //console.log("Append html--------- " +$(".postedComment:last").attr('id'));
                    $("#last").remove();
                    $("#postedComments").append( "<p id='last'></p>" );
                    $('div#loadMoreComments').hide();
                    $('#endofdeals').hide();
                    }
                    }
                    });
                    }
            }
            else
                    {
                            if($('#endofdeals')!='')
                            {
                            $('#endofdeals').hide(); 
                            if(currentdealoffset < displaymode)
                                    {
                                            $('#endofdeals').hide();
                                    }else if(currentdealoffset > displaymode)
                                    {
                                            $('#endofdeals').show();
                                            $('#endofdeals').html("<center><h2 style='color:#4C335B'>End of deals !!!!!!!</h2></center>");
                                    }
                            }
                    }
                    }
                    });

You should Google for a infinite scroll library it should have a callback function where it loads data doing an Ajax request. Hook that function! — MaX, Oct 15 '12 at 10:22
please tell us what you have tried so far so we can give you advice. Nobody is going to solve your problem if you dont show that you've made an effort — Sheena, Oct 15 '12 at 10:23

score 1 · Answer 1 · answered Oct 15 '12 at 10:25

According to me, You want page numbers but the pages should load slowly as you scroll. If this you want then, you should not use Infinite scroll technique but LazyScroll will help you and if you want 20 records then make your query for 20 records also create pagination below

Here, you can have the Plug-in and Demo.

Infinite scrolling with ajax paging (After some scroll show pagination)

1 Answers1