You might have seen the implementation of Ajax based data loading system at Facebook, Twitter or some other sites. Instead of showing pagination links, we can load data dynamically whenever a load button click. In this article I’ll show you how we can easily adopt this technique to make similar loading page for our web projects using jQuery.
You may also want to checkout similar tutorial Auto Load More Data On Page Scroll. In my earlier post Simple Ajax Pagination, I have explained how to create Ajax Pagination using jQuery. Here we will be doing precisely the same thing.
We use this configuration file to store certain variables such as MySql username and password, which is required by our program..
Here’s our HTML that contains a load button, a loading gif image and place to dump the results from the server. Loading image is hidden initially, when the load button is clicked, we show the loading image that indicates loading data.
There are various ways to do this, but here you can see I’ve added an increment to the button click, which we will use as page number to determine the records position in MySql query.
As I discussed earlier, we need to pass the page number to the PHP script below, it then will connect to database and fetch the records using page number and “item_per_page” offset. The PHP code uses MySqli Prepared Statements to fetch the records, which is very useful against SQL injections and the performance is highly efficient. You can learn more about MySqli Prepared Statements here.
That’s it! we should have a nifty jQuery based data loading page by now. Don’t forget to checkout the demo and download the whole thing in your computer, downloadable file includes loading image and jQuery file, required by the script. Good luck! If you want to make Ajax Pagination with Next-Previous buttons, you can checkout this updated article — Ajax Pagination with jQuery & PHP.