AdSense

Load dynamic data using Load More pagination with PHP and jQuery AJAX

Hello Guys, 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` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `username` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `age` int(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- 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 (dbConfig.php)

<?php

	// 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 (index.php)

<!DOCTYPE html>
<html lang="en">
<head>
  <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>
</head>
<body>

<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>

<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12">
      <table class="table table-striped" id="loadData">
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Username</th>
            <th>Email</th>
            <th>Age</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

</body>
</html>

jQuery AJAX Code

<script type="text/javascript">
  $(document).ready(function(){
      loadMoreData();
      function loadMoreData(page){
        $.ajax({
          url : "load-more.php",
          type: "POST",
          cache:false,
          data:{page_no:page},
          success:function(data){
            if (data) {
              $("#pagination").remove();
              $("#loadData").append(data);
            }else{
              $(".loadbtn").prop("disabled", true);
              $(".loadbtn").html('That is All');
            }
          }
        });
      }
      
      $(document).on('click', '.loadbtn', function(){
        $(".loadbtn").html('Loading...');
        var pId = $(this).data("id");
        loadMoreData(pId);
      });
  });
</script>

Load More Data (load-more.php)

<?php
	
	// Include the database configuration file
	require_once('dbConfig.php');

	$limit = 5;

	if (isset($_POST['page_no'])) {
		$page = $_POST['page_no'];
	}else{
		$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.="<tr>
	            <td>{$row["id"]}</td>
	            <td>{$row["name"]}</td>
	            <td>{$row["username"]}</td>
	            <td>{$row["email"]}</td>
	            <td>{$row["age"]}</td>
	       	</tr>";
	}

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

?>

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 / problems about this tutorial, please comment on the  form below.😊

1 Comments

Post a Comment

Previous Post Next Post