Ajax ব্যবহার করে Large Data Set এর জন্য Pagination Handling করা একটি গুরুত্বপূর্ণ পদ্ধতি, বিশেষ করে যখন আপনার ডাটাবেসে অনেক ডেটা থাকে এবং আপনি ইউজার ইন্টারফেসে এটি ডায়নামিক্যালি এবং দ্রুত লোড করতে চান। Ajax এর মাধ্যমে Pagination পরিচালনা করার সময়, প্রতিবার নতুন পেজে ক্লিক করলে নতুন ডেটা লোড করা হয়, যা পেজ রিফ্রেশ ছাড়াই ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

Large Data Set এর জন্য Pagination Handling এর কী পয়েন্ট:

Ajax Based Pagination: প্রতিবার যখন ব্যবহারকারী পেজ নম্বর বা নেভিগেশন বাটনে ক্লিক করে, তখন Ajax রিকোয়েস্টের মাধ্যমে ডেটা ফেচ করা হয়, যা পেজ রিফ্রেশ ছাড়াই ডেটা লোড করে।
Server-Side Data Fetching: ডেটাবেস থেকে শুধুমাত্র নির্দিষ্ট রেঞ্জের ডেটা (প্রতি পেজে কয়েকটি রেকর্ড) ফেচ করা হয়, যা সার্ভার এবং ক্লায়েন্ট সাইডের পারফরম্যান্স উন্নত করে।
Dynamic Pagination Controls: পেজিনেশন বাটনগুলো ডায়নামিক্যালি তৈরি এবং আপডেট করা হয়, যাতে ইউজার ইন্টারফেসে ইউজার সহজেই নেভিগেট করতে পারে।

উদাহরণ: Ajax এর মাধ্যমে Large Data Set এর Pagination Handling

১. HTML এবং JavaScript (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Large Data Set Pagination Example</title>
    <style>
        /* Pagination styling */
        .pagination {
            margin-top: 20px;
        }
        .pagination button {
            margin: 2px;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>Employee List</h1>
    <table id="employee-table" border="1" style="width: 100%; margin-top: 20px;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
        </tbody>
    </table>

    <div class="pagination" id="pagination">
        <!-- পেজিনেশন বাটন এখানে ডায়নামিক্যালি যোগ করা হবে -->
    </div>

    <script>
        // বর্তমান পেজ ট্র্যাক করার জন্য ভ্যারিয়েবল
        let currentPage = 1;
        const rowsPerPage = 10;

        // পেজ লোড হলে ডেটা লোড করা
        document.addEventListener('DOMContentLoaded', function() {
            fetchData(currentPage);
        });

        // Ajax এর মাধ্যমে ডেটা ফেচ করার ফাংশন
        function fetchData(page) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "fetch_employees.php?page=" + page + "&rowsPerPage=" + rowsPerPage, true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    renderTable(response.data);
                    renderPagination(response.totalPages, page);
                }
            };

            xhr.send();
        }

        // টেবিল রেন্ডার করার ফাংশন
        function renderTable(data) {
            var tbody = document.querySelector("#employee-table tbody");
            tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা

            data.forEach(function(employee) {
                var row = document.createElement("tr");
                row.innerHTML = `<td>${employee.name}</td>
                                 <td>${employee.email}</td>
                                 <td>${employee.department}</td>`;
                tbody.appendChild(row);
            });
        }

        // পেজিনেশন রেন্ডার করার ফাংশন
        function renderPagination(totalPages, currentPage) {
            var pagination = document.getElementById('pagination');
            pagination.innerHTML = "";

            for (let i = 1; i <= totalPages; i++) {
                var button = document.createElement("button");
                button.textContent = i;
                if (i === currentPage) {
                    button.disabled = true;
                }
                button.onclick = function() {
                    fetchData(i);
                };
                pagination.appendChild(button);
            }
        }
    </script>
</body>
</html>

২. PHP স্ক্রিপ্ট (fetch_employees.php)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500);
    echo json_encode(["error" => "Database connection failed."]);
    exit();
}

// ইনপুট প্যারামিটার সংগ্রহ করা
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rowsPerPage = isset($_GET['rowsPerPage']) ? intval($_GET['rowsPerPage']) : 10;
$offset = ($page - 1) * $rowsPerPage;

// মোট রেকর্ডের সংখ্যা পাওয়া
$totalResult = $conn->query("SELECT COUNT(*) as total FROM employees");
$totalRows = $totalResult->fetch_assoc()['total'];
$totalPages = ceil($totalRows / $rowsPerPage);

// SQL কুয়েরি তৈরি করা
$sql = "SELECT name, email, department FROM employees LIMIT ?, ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ii", $offset, $rowsPerPage);
$stmt->execute();
$result = $stmt->get_result();

// ডেটা অ্যারে তৈরি করা
$employees = [];
while ($row = $result->fetch_assoc()) {
    $employees[] = $row;
}

// JSON রেসপন্স তৈরি করা
header('Content-Type: application/json');
echo json_encode([
    "data" => $employees,
    "totalPages" => $totalPages
]);

$stmt->close();
$conn->close();
?>

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

HTML এবং JavaScript:

পেজ লোড হলে fetchData() ফাংশন কল হয় যা Ajax রিকোয়েস্ট পাঠায়।
প্রতিটি পেজ লোডের সময় Ajax রিকোয়েস্ট ডাটাবেস থেকে নির্দিষ্ট পরিমাণ ডেটা (per page limit) লোড করে এবং JSON রেসপন্স রিটার্ন করে।
renderTable() ফাংশন Ajax থেকে প্রাপ্ত ডেটা ব্যবহার করে টেবিল আপডেট করে।
renderPagination() ফাংশন ডায়নামিক্যালি পেজিনেশন বাটন তৈরি করে।

PHP স্ক্রিপ্ট:

PHP স্ক্রিপ্টে ডাটাবেসে SQL কুয়েরি চালানো হয়েছে যা বর্তমান পেজ এবং প্রতি পেজে কতটি রেকর্ড ফেচ করতে হবে তা নির্ধারণ করে।
মোট পেজ সংখ্যা গণনা করে এবং JSON রেসপন্সের মাধ্যমে ডেটা এবং মোট পেজ সংখ্যা রিটার্ন করে।

Large Data Set এর জন্য Ajax Pagination এর সুবিধা:

পেজ রিফ্রেশ ছাড়াই ডেটা লোড: Ajax ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ডেটা লোড করা যায়, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
Efficient Data Fetching: সার্ভার সাইডে নির্দিষ্ট সংখ্যক ডেটা (per page) ফেচ করা হয়, যা সার্ভার এবং ক্লায়েন্ট সাইডের পারফরম্যান্স উন্নত করে।
ডায়নামিক ইন্টারফেস: পেজিনেশন বাটনগুলো ডায়নামিক্যালি তৈরি এবং আপডেট হয়, যাতে ব্যবহারকারী সহজেই পেজ নেভিগেট করতে পারে।

Content added By

Md. Nasir Uddin (Raju)

আরও দেখুন...

Large Data Set এর জন্য Pagination Handling

Large Data Set এর জন্য Pagination Handling