Infinite scroll pagination with PHP & Ajax

If you are looking for infinite scroll pagination in PHP & Ajax without using any plugin then you are at the right place. Check the code first.

<script>
$(document).ready(function() {
    nextPage = 1;
    loading = 0;
    whichpage= $('#whichpage').text();
    $(window).scroll(function() {
        h = $(document).height() - $(window).height() - 300;
        st = $(window).scrollTop();    
        if (st >= h && (whichpage== 1)) {
        if (loading == 0) {
            nextPage += 1;
            $('<div id = "data' + nextPage + '"><img src=\'animation gif url\' /></div>').appendTo($('#datacontainer'));
            loading = 1;
            loaddata();
        }
    }
    });
    
    function loaddata() {
    $.ajax({
        dataType: "text",
        url: "http://www.example.com/index.php?page=" + nextPage,
        success: function(result) {
            divid = '#data' + nextPage;
            $(divid).html(result);
            loading = 0;
            if (result == '') loading = 1;
        },
        error: function() {
            //$("#somediv").text("Technical Error");
        },
        beforeSend: function() {
            //$("#somediv").text("Loading....");
        },
        complete: function() {                            
        }
    });
    }
});
</script>

Understanding Javascript in Infinite scroll pagination

Before copying the code, your HTML file must have div “datacontainer” or you can name anything, where you want to download the next set of data.

<div id='datacontainer'></div>

window.scroll event

On window scroll event whenever the window.scrolltop value is greater than document.height – window.height – 300 (Here 300 is used because my footer height is 300px and I want to load data before viewing my footer.). And after checking if there is no loading (initial loading is 0), It will create a dynamic div with an animated image and appends to datacontainer div and set the loading value to 1 and loaddata function will get executed.

‘data’+nextPage

data2

Dynamic div is generated in order like data2, data3, data4 and more.

loaddata function

loaddata function calls the ajax request to the server with the page number, it will return the next set of records and load data in ‘data’+nextPage div and loading variable reset to 0 if data is loaded successfully and if fail there is no data it will set to 1.

<div id=''datacontainer'>
     <div id='data2'><img src='http://www.example.com/loading.gif'></div>
</div>

whichpage?

Whenver we do pagination on server we created n number of url requests like

http://www.example.com/index.php?page=1
http://www.example.com/index.php?page=2
http://www.example.com/index.php?page=3

And every time when scrollbar hits at the bottom it will create a new URL and sent a request to the server. Here whichpage variable tells us the Page where we want an infinite scrolling. So when we request for page 1 add the below code in HTML. In this way only on the first page scrolling will work;

<div id='whichpage' style='display:none'>1</div>

Check if the request is Ajax Request

You can use below code to check if the request is ajax request only then load data.

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
 !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && 
 strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
 {
	echo $data; // ajax response
}
else
{
        echo $regularresponse; // no ajax
}

PHP Pagination Handling

You can see here to handle pagination at PHP Pagination Handling