03-Apr-2023
.
Admin
Hi friends,
In this post, we will learn how to PHP Ajax load page without refresh. i explained simply step by step how to PHP Ajax pagination without reloading page. Here you will learn pagination without page refresh in PHP Ajax. This tutorial will give you simple example of Ajax pagination using jQuery with PHP and MySQL.
I will give you simple Example of how to Ajax pagination in PHP with next and previous.
So let's see bellow example:
db_connect.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demos";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?>
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AJAX Pagination with PHP Without Page Refresh - Nicesnippets.com</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="plugin/simple-bootstrap-paginator.js"></script>
</head>
<body>
<?php
include_once("db_connect.php");
$perPage = 5;
$sqlQuery = "SELECT * FROM developers";
$result = mysqli_query($conn, $sqlQuery);
$totalRecords = mysqli_num_rows($result);
$totalPages = ceil($totalRecords/$perPage)
?>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card mb-3">
<div class="card-header bg-success text-white text-center">
<h4>AJAX Pagination with PHP Without Page Refresh - Nicesnippets.com</h4>
</div>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Address</th>
<th>Skills</th>
<th>Designation</th>
</tr>
</thead>
<tbody id="content"></tbody>
</table>
</div>
<div id="pagination"></div>
<input type="hidden" id="totalPages" value="<?php echo $totalPages; ?>">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var totalPage = parseInt($('#totalPages').val());
console.log("==totalPage=="+totalPage);
var pag = $('#pagination').simplePaginator({
totalPages: totalPage,
maxButtonsVisible: 5,
currentPage: 1,
nextLabel: 'Next',
prevLabel: 'Prev',
firstLabel: 'First',
lastLabel: 'Last',
clickCurrentPage: true,
pageChange: function(page) {
$("#content").html('<tr><td colspan="6"><strong>loading...</strong></td></tr>');
$.ajax({
url:"load_data.php",
method:"POST",
dataType: "json",
data:{page: page},
success:function(responseData){
$('#content').html(responseData.html);
}
});
}
});
});
</script>
</body>
</html>
load_data.php
<?php
include_once("db_connect.php");
$perPage = 5;
$page = 0;
if (isset($_POST['page'])) {
$page = $_POST['page'];
} else {
$page=1;
};
$startFrom = ($page-1) * $perPage;
$sqlQuery = "SELECT id, name, age, address, skills, designation FROM developers ORDER BY id ASC LIMIT $startFrom, $perPage";
$result = mysqli_query($conn, $sqlQuery);
$paginationHtml = '';
while ($row = mysqli_fetch_assoc($result)) {
$paginationHtml.='<tr>';
$paginationHtml.='<td>'.$row["id"].'</td>';
$paginationHtml.='<td>'.$row["name"].'</td>';
$paginationHtml.='<td>'.$row["age"].'</td>';
$paginationHtml.='<td>'.$row["address"].'</td>';
$paginationHtml.='<td>'.$row["skills"].'</td>';
$paginationHtml.='<td>'.$row["designation"].'</td>';
$paginationHtml.='</tr>';
}
$jsonData = array(
"html" => $paginationHtml,
);
echo json_encode($jsonData);
?>
Output:
I hope it will help you....
#PHP
