Load More data from the database using AJAX, jQuery in PHP with MySQL

Today, we’ll explain to you how to load more data from the database using AJAX, jQuery in PHP with MySQL.

It is nothing but one type of pagination. If you have seen some social media or e-commerce sites that use the Load More data functionality to view dynamic data. This functionality loads the data from the database without page refresh using AJAX. In this article, we will show you how to show more data on button click using AJAX, jQuery and PHP.

Here, we will implement the load more data feature instead of displaying the pagination link.

Preview

Output - Load More data from the database using AJAX, jQuery in PHP with MySQL - Clue Mediator
Output – Load More data from the database using AJAX, jQuery in PHP with MySQL – Clue Mediator

Steps to load more data from database using PHP

  1. Create database table
  2. Database connection
  3. Create HTML page
  4. Add CSS
  5. Add Ajax call
  6. Create PHP action file
  7. Output

File Structure

  • load-more-data-php
    • db_config.php
    • index.php
    • loadmore-data.php

1. Create database table

First of all, we will create a table named posts in the demo database. Run the following SQL script to create a table with dummy records in the database.

2. Database connection

We have to create a db_config.php file and add the following code to connect the database.

db_config.php

3. Create HTML page

Here, we will include a database connection file named db_config.php and show limited data (3 posts) with a Load More button. Here we will store the total post count and start value (offset) in the hidden text. So we can manage and fetch the next records (3 posts) from the database.

index.php

4. Add CSS

Now, we will add the following CSS in the index.php file before the closing head (</head>) tag for the basic UI style.

5. Add Ajax call

In this step, we need to include the following jQuery library in the head section to load more data from the database without page refresh.

Now, we will need to add a jQuery script to handle the load more functionality. When the Load More button is clicked, the AJAX request is sent to the loadmore-data.php file.

  • Set the row value to hidden text to get the next record.
  • Append the response to the div with .postList class.
  • The rowCount greater than post count then hide the Load More button.

Add the following script in the index.php file before the closing body (</body>) tag.

6. Create PHP action file

Let’s create a php file named loadmore-data.php. The Ajax request is sent to this PHP file and then retrieves the next 3 post data from the database based on the $_POST[‘row’] value and returns the HTML layout.

loadmore-data.php

7. Output

Run the project and check the output in the browser.

I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository
If you found value in this article,
you can support us by buying me a coffee! ☕

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *