PHP Ajax Next Previous Pagination Example
Mar 23, 2022 . Admin
Hello dev,
I am going to explain you how to PHP Ajax pagination next previous. You will learn AJAX pagination with PHP. In side this article we will see Ajax pagination using PHP.
This article will give you simple example of Ajax pagination with PHP and MySQL. We will use get simple How to simple Ajax pagination with PHP.
I will give you simple Example of How to pagination with jQuery Ajax, PHP and MySQL.
So, let's see bellow solution:
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>PHP Ajax Next Previous Pagination - Mywebtuts.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>PHP Ajax Next Previous Pagination - Mywebtuts.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:
It will help you...