Pagination is used to split large data sets into smaller pages. With AJAX, data loads page by page without refreshing the entire page, resulting in a smooth and fast user experience.
When a user clicks a pagination link, JavaScript sends an AJAX request to a PHP script. The PHP script calculates the offset, fetches limited records from the database, and returns JSON containing data and pagination links.
// HTML containers for data and pagination
<div id="data"></div>
<div id="pagination"></div>
<script>
// Function to load a specific page using AJAX
function loadPage(page) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "pagination.php?page=" + page, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("data").innerHTML = response.data;
document.getElementById("pagination").innerHTML = response.pagination;
}
};
xhr.send();
}
// Load first page on initial page load
window.onload = function() {
loadPage(1);
};
</script>
// Database connection and pagination logic
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$limit = 5;
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed");
}
$page = isset($_GET["page"]) ? (int)$_GET["page"] : 1;
$offset = ($page - 1) * $limit;
$sql = "SELECT * FROM users LIMIT $limit OFFSET $offset";
$result = $conn->query($sql);
$total_sql = "SELECT COUNT(*) AS total FROM users";
$total_result = $conn->query($total_sql);
$total_row = $total_result->fetch_assoc();
$total_pages = ceil($total_row["total"] / $limit);
$output = "<ul>";
while ($row = $result->fetch_assoc()) {
$output .= "<li>" . $row["name"] . " (" . $row["email"] . ")</li>";
}
$output .= "</ul>";
$pagination = "";
for ($i = 1; $i <= $total_pages; $i++) {
$pagination .= "<a href='javascript:loadPage($i)'>$i</a> ";
}
echo json_encode(["data" => $output, "pagination" => $pagination]);
$conn->close();
?>
Clicking a page number sends an AJAX request to the server. The server returns new records and updated pagination links, which replace the existing content instantly.