Steps and logic to load more functionality
Load more results button is very common functionality in most modern websites.
This functionality helps to load post, images or any other content on click of a button without reloading that page with the help of AJAX and jQuery from the database.
Note: for the sake of simplicity and loading content quickly we are first fetching result dynamically using PHP then fetching data using ajax.
Step 1 setup your database and insert some data.
I have created a table with name d_customer with some columns and inserted some random data.
Step 2: Create an index page and database connection files.
Create one Index page with some static content on it and also create separate database connection files and include them in an index.php page.
Step 3: Fetching data from a database using PHP in the main page.
In this demo, I have fetched 3 rows from the database and generated tables with PHP code
so we can get some data quickly without waiting for ajax call to the server.
EMAIL
MOBILE
NAME |
---|
Step 4: Create on data.php file for getting data as JSON format on AJAX request.
In the data.php file, I pulled same customer data in JSON format. it takes on get request with a limit parameter. based on that limit it shows a number of rows.
Step 5: Sending AJAX request to data.php file and Appending rows
The final step is to pull data from the data.php file just like API request to the server.
In the below, I used jQuery functions for ajax call. At first, I have added one button with load_more id and one hidden input field with the value of ‘1’ and id with page_no. Now logic is first we take input value from id #page_no on a click of load_more after that we send AJAX request with a limit parameter after that increase limit value by 3 in input filed so next time we can load rest of the content on next request. let’s dig into the code for better understanding.
I do not know what to say really what you share very well and useful to the community, I feel that it makes our community much more developed, thanks
We are very glad to help you.