In this tutorial, we are going to see about loading data into a web page dynamically as the user scrolls it. We will be using jQuery and AJAX for the dynamic load on the scroll. Initially, we will show a limited number of results on page load. The subsequent bunch of records will be shown while scrolling down the page using jQuery AJAX event handler. This is an alternate solution for per-page navigation scenario.
jQuery AJAX Scroll Down Event Handler
As the user keeps scrolling, the AJAX call will be continuously invoked until data reaches the end of the record in the database. Following is the AJAX function that shows the loading icon and retrieves data from the backend and shows it.
PHP Page (getresult.php)
PHP page requested by the AJAX scroll event handler is,
We are familiar with the above PHP script which we have already seen in jQuery pagination tutorial. Presently this PHP script returns 10 records for each scroll event since we have set it as the per-page limit.