Load More Data pagination using jQuery Ajax PHP MySQL

In this post we will learn to load more data using Ajax JQuery to PHP using MySql. This is a very common feature which is used on major social networks like Facebook, Twitter, Youtube, etc. This function loads data without refreshing the page.

Load data from the database with an Ajax function call. With the Ajax function call you receive data from the database and it is displayed on the front end without refreshing the page. This feature is very useful when loading data step by step without refreshing the page and building the page.

If you’ve seen some social media sites like Youtube, Twitter, and even Facebook, use more data loading features. All of these websites use these features which do not display page-to-page links on their website, but instead use these buttons for more data.

So when we click on this button they get the data for the next page of the Ajax database with PHP and add this data to the same page as Jquery. This data is loaded without refreshing the page.

In this tutorial we use this function to load more data at the press of a button, and we get the data from the database with jQuery Ajax and PHP. In this tutorial we will discuss step by step how to load more data per button using Jquery with Ajax PHP.

Create Database & Table

-- Database: `registration`
-- --------------------------------------------------------
-- Table structure for table `users`

CREATE TABLE `users` (
  `name` varchar(50) NOT NULL,
  `username` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `age` int(50) NOT NULL

-- Dumping data for table `users`

INSERT INTO `users` (`id`, `name`, `username`, `email`, `age`) VALUES
(1, 'john', 'john12', 'webscodex7@gmail.com', 32),
(2, 'roman', 'roman12', 'webscodex7@gmail.com', 32),
(3, 'undertaker', 'undertaker12', 'webscodex7@gmail.com', 32),
(4, 'kane', 'kane12', 'kane@gmail.com', 32),
(5, 'aj style', 'ajstyle12', 'ajstyle@gmail.com', 32),
(6, 'seth', 'seth12', 'seth@gmail.com', 32),
(7, 'dean', 'dean123', 'dean@gmail.com', 32),
(8, 'jindal', 'jindal25', 'jindal@gmail.com', 32),
(9, 'manish', 'manish', 'manish007@gmail.com', 32),
(10, 'manoj', 'manoj12', 'manoj12@gmail.com', 32),
(11, 'binod', 'binod12', 'binod12@gmail.com', 32),
(12, 'kumar', 'kumar12', 'kumar12@gmail.com', 32),
(13, 'nakul', 'nakul12', 'nakul12@gmail.com', 32);

Database Configuration

In the first step we need to create a database and tables, so here I have created a database of tables “registration” and ”users” with identifiers and columns with names. You simply create a Users table as described in the SQL query.



	// database configuration 
	$sernamename = "localhost";
	$username 	 = "root";
	$passoword   = "";
	$databasename= "registration";

	// create database connection
	$con = new mysqli($sernamename, $username,$passoword,$databasename);

	// check connection
	if ($con->connect_error) {
		die("Connection failed". $con->connect_error);

Create HTML Page for Data list


<!DOCTYPE html>
<html lang="en">
  <title>load dynamic data load more pagination with PHP and AJAX jQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="jumbotron text-center">
  <h2>Load dynamic data using <span class="text-primary">Load More</span> pagination with PHP and jQuery AJAX</h2>

<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12">
      <table class="table table-striped" id="loadData">


jQuery AJAX Code

<script type="text/javascript">
      function loadMoreData(page){
          url : "load-more.php",
          type: "POST",
            if (data) {
              $(".loadbtn").prop("disabled", true);
              $(".loadbtn").html('That is All');
      $(document).on('click', '.loadbtn', function(){
        var pId = $(this).data("id");

Load More Data


	// Include the database configuration file

	$limit = 5;

	if (isset($_POST['page_no'])) {
		$page = $_POST['page_no'];
		$page = 0;

	$sql = "SELECT * FROM users LIMIT $page, $limit";
	$query = $con->query($sql);

	if ($query->num_rows > 0) {
	$output = "";

	$output .= "<tbody>";

	while ($row = $query->fetch_assoc()) {
	$last_id = $row['id'];


	$output .= "<tbody>";
	$output .= "<tbody id='pagination'>
	   		    <td colspan='5'><button class='btn btn-success loadbtn' data-id='{$last_id}' style='margin-left:500px'>Load More</button></td>
	echo $output;	  



Load More Data pagination using jQuery Ajax PHP MySQL

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊

Load More Data pagination using jQuery Ajax PHP MySQL


Leave a Reply

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