AJAX এবং Pagination ওয়েব অ্যাপ্লিকেশনে ডাটা ফেচিং এবং পেজিনেশন প্রক্রিয়াকে আরও দ্রুত ও ইউজার-ফ্রেন্ডলি করে তোলে। এখানে আমরা দেখব কিভাবে AJAX এবং MySQLi এর মাধ্যমে পেজিনেশন তৈরি করতে হয়, যাতে ব্যবহারকারী স্ক্রোলিং বা পেজ পরিবর্তন ছাড়াই ডাটা দেখতে পারে।
1. AJAX এবং Pagination এর জন্য টেবিলের তৈরি করা
প্রথমে, একটি HTML টেবিল তৈরি করতে হবে যা পেজিনেটেড ডাটা দেখাবে এবং AJAX কলের মাধ্যমে পেজ পরিবর্তন হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Pagination Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
th, td {
text-align: center;
}
.pagination a {
margin: 5px;
padding: 5px 10px;
background-color: #f1f1f1;
border: 1px solid #ddd;
text-decoration: none;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h2>AJAX Pagination with MySQLi</h2>
<table id="data-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<!-- Data will be dynamically loaded here -->
</tbody>
</table>
<div class="pagination" id="pagination-links">
<!-- Pagination links will be dynamically loaded here -->
</div>
<script>
// Initial call to load data
$(document).ready(function() {
loadData(1); // Load the first page by default
// Function to load data with AJAX
function loadData(page) {
$.ajax({
url: 'fetch_data.php',
type: 'GET',
data: { page: page },
success: function(response) {
var data = JSON.parse(response);
var html = '';
var pagination = '';
// Display data in the table
$.each(data.records, function(index, record) {
html += '<tr><td>' + record.id + '</td><td>' + record.name + '</td><td>' + record.email + '</td></tr>';
});
$('#data-table tbody').html(html);
// Create pagination links
for (var i = 1; i <= data.totalPages; i++) {
pagination += '<a href="javascript:void(0);" class="pagination-link' + (i == data.currentPage ? ' active' : '') + '" data-page="' + i + '">' + i + '</a>';
}
$('#pagination-links').html(pagination);
}
});
}
// Handle pagination link clicks
$(document).on('click', '.pagination-link', function() {
var page = $(this).data('page');
loadData(page);
});
});
</script>
</body>
</html>
এখানে:
- AJAX ব্যবহার করা হয়েছে ডাটা লোড এবং পেজ পরিবর্তন করার জন্য।
fetch_data.phpস্ক্রিপ্টের মাধ্যমে ডাটা ফেচ করা হবে এবং তারপর সেই ডাটা টেবিল ও পেজিনেশন লিঙ্কে প্রদর্শন করা হবে।- pagination লিঙ্কগুলি ডাইনামিকভাবে তৈরি হবে এবং ক্লিক করলে নতুন ডাটা লোড হবে।
2. PHP স্ক্রিপ্ট (fetch_data.php)
এখন, PHP স্ক্রিপ্টটি তৈরি করতে হবে যা MySQLi ব্যবহার করে ডাটা ফেচ করবে এবং AJAX এর মাধ্যমে পেজিনেশন ডেটা রিটার্ন করবে।
<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "test";
// MySQLi connection
$conn = new mysqli($host, $user, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Get the page number from AJAX request
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$records_per_page = 5; // Number of records per page
$offset = ($page - 1) * $records_per_page;
// Get the total number of records for pagination
$result = $conn->query("SELECT COUNT(*) AS total FROM users");
$row = $result->fetch_assoc();
$total_records = $row['total'];
$total_pages = ceil($total_records / $records_per_page);
// Fetch the records for the current page
$query = "SELECT * FROM users LIMIT $offset, $records_per_page";
$result = $conn->query($query);
// Prepare the data to be returned in JSON format
$records = [];
while ($row = $result->fetch_assoc()) {
$records[] = $row;
}
// Return the data as JSON
$response = [
'records' => $records,
'currentPage' => $page,
'totalPages' => $total_pages
];
echo json_encode($response);
$conn->close();
?>
এখানে:
- $page: AJAX কল থেকে প্রাপ্ত পেজ নম্বর।
- $records_per_page: প্রতি পৃষ্ঠায় কতগুলো রেকর্ড দেখানো হবে।
- $offset: রেকর্ডগুলোর সঠিক অবস্থান (স্কিপ) নির্ধারণ করতে ব্যবহৃত হয়।
- $total_records: টেবিলের মোট রেকর্ড সংখ্যা।
- $total_pages: মোট পৃষ্ঠার সংখ্যা নির্ধারণ করা হয়।
- $records: বর্তমান পৃষ্ঠার ডাটা যা JSON হিসেবে ফেরত দেওয়া হয়।
3. MySQL টেবিল তৈরি করা
আপনার ডাটাবেসে একটি টেবিল থাকতে হবে, যেখানে ডাটা থাকবে। নিচে একটি উদাহরণ:
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL
);
এই টেবিলটি ব্যবহার করে আপনি ইউজারদের তথ্য রাখবেন। আপনাকে কিছু রেকর্ড ইন্সার্ট করতে হবে যাতে পেজিনেশন সঠিকভাবে কাজ করে।
INSERT INTO users (name, email) VALUES
('John Doe', 'john@example.com'),
('Jane Smith', 'jane@example.com'),
('Robert Brown', 'robert@example.com'),
('Emily Davis', 'emily@example.com'),
('Michael Johnson', 'michael@example.com'),
('Sarah Lee', 'sarah@example.com'),
('David Wilson', 'david@example.com'),
('Sophia Miller', 'sophia@example.com'),
('James Anderson', 'james@example.com'),
('Olivia Martinez', 'olivia@example.com');
এই ডাটা দিয়ে আপনার টেবিল পূর্ণ হবে এবং পেজিনেশন এবং AJAX কাজ করবে।
সারাংশ
- AJAX এবং MySQLi ব্যবহার করে পেজিনেশন তৈরি করা হয়েছে যাতে ব্যবহারকারী নতুন পেজে পরিবর্তন না করে ডাটা দেখতে পারে।
- পেজিনেশন ডাইনামিকভাবে AJAX কলের মাধ্যমে পরিচালিত হয়, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে তোলে।
- fetch_data.php স্ক্রিপ্টের মাধ্যমে ডাটাবেস থেকে পেজিনেটেড ডাটা ফেচ করা হয় এবং JSON ফরম্যাটে পাঠানো হয়।
Content added By
Read more
