AJAX pagination is a technique that allows you to load content on a web page asynchronously without requiring a full page refresh. This is useful when you have a large dataset to display, and you want to split it into multiple pages to improve user experience. Here's how you can implement AJAX pagination with PHP:
Here we using 3 file for send array data to php script file using ajax
<?php
include('database.php');
$limit = 4;
$sql = "SELECT COUNT(id) FROM user_data";
$rs_result = mysqli_query($conn, $sql);
$row = mysqli_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP Pagination AJAX</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Employees</b>Add New Employee</span></a>
<a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons"></i> <span>Delete</span></a>
</div>
</div>
</div>
<div id="target-content">loading...</div>
<div class="clearfix">
<ul class="pagination">
<?php
if(!empty($total_pages)){
for($i=1; $i<=$total_pages; $i++){
if($i == 1){
?>
<li class="pageitem active" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" data-id="<?php echo $i;?>" class="page-link" ><?php echo $i;?></a></li>
<?php
}
else{
?>
<li class="pageitem" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" class="page-link" data-id="<?php echo $i;?>"><?php echo $i;?></a></li>
<?php
}
}
}
?>
</ul>
</ul>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#target-content").load("pagination.php?page=1");
$(".page-link").click(function(){
var id = $(this).attr("data-id");
var select_id = $(this).parent().attr("id");
$.ajax({
url: "pagination.php",
type: "GET",
data: {
page : id
},
cache: false,
success: function(dataResult){
$("#target-content").html(dataResult);
$(".pageitem").removeClass("active");
$("#"+select_id).addClass("active");
}
});
});
});
</script>
</body>
</html>
<?php
include('database.php');
$limit = 5;
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $limit;
$sql = "SELECT * FROM user_data ORDER BY name ASC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysqli_fetch_array($rs_result)) {
?>
<tr>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["email"]; ?></td>
</tr>
<?php
};
?>
</tbody>
</table>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="school";
$conn = mysqli_connect($servername, $username, $password,$db);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>