PHP Ajax Pagination with Load More Example
Mar 21, 2022 . Admin
Hello dev,
I am going to explain you how to Ajax load more pagination in PHP. You will learn load more results with jQuery,AJAX, and PHP. In side this article we will see How to load more data from database using jQuery Ajax with PHP.
This article will give you simple example of load more pagination with PHP & Ajax. We will use get simple How to PHP Ajax pagination with load more.
I will give you simple Example of How to load more results in PHP, Ajax and MySQL From Database.
So, let's see bellow solution:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP Ajax Pagination with Load More - Mywebtuts.com</title>
<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>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card-header text-center bg-dark text-white">
<h4>PHP Ajax Pagination with Load More - Mywebtuts.com</h4>
</div>
<table class="table table-bordered" 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>
<script type="text/javascript">
$(document).ready(function(){
loadMoreData();
function loadMoreData(page){
$.ajax({
url : "load.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>
</body>
</html>
load.php
<?php
$sernamename = "localhost";
$username = "root";
$passoword = "";
$databasename= "demos";
$con = new mysqli($sernamename, $username,$passoword,$databasename);
if ($con->connect_error) {
die("Connection failed". $con->connect_error);
}
$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:
It will help you...