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 PRIMARY KEY AUTO_INCREAMENT, `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
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.
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
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.😊
Nice
This is the most helpful tutorial I have ever found!!!