การใช้งาน DataTable พร้อม AJAX ทำ Pagination ใน PHP

Sept. 26, 2024 · boychawin

วันนี้ผมได้มีโอกาสกลับไปทำโปรเจกต์เก่ามากๆ สมัยเรียนอยู่เลยครับ ซึ่งเป็นการใช้งาน DataTable ง่ายๆเลย มีข้อมูลเท่าไหร่ก็ดึงมาแล้วให้ DataTable เป็นตัวแบ่งหน้าให้ซึ่งเป็นสิ่งที่ไม่ดีมากเลยนะครับ เดียววันนี้เราจะมาทำให้มันถูกด้วย AJAX 🤣 ในตัวอย่างนี้ เราจะสร้างตารางข้อมูลโดยใช้ DataTables พร้อมการดึงข้อมูลแบบ AJAX จากฐานข้อมูล MySQL โดยใช้ PHP เพื่อจัดการข้อมูลที่ส่งกลับมาในรูปแบบ JSON HTML และ JavaScript เริ่มกันเลย

โค้ดตัวอย่างการใช้งาน DataTables พร้อมกับ AJAX ใน PHP

<!-- index.php -->
<!DOCTYPE html>
<html lang="th">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataTables Example</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
</head>

<body>

    <div class="container">
        <h1>DataTables Example</h1>
        <table id="data-table" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Age</th>
                </tr>
            </thead>
        </table>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>

    <script>
        $(document).ready(function () {
            var table = $('#data-table').DataTable({
                responsive: true,
                lengthMenu: [[10, 50, 100], [10, 50, 100]],
                order: [[0, "desc"]],
                lengthChange: true,
                autoWidth: true,
                paging: true,
                pagingType: "full_numbers",
                pageLength: 10,
                serverSide: true,
                ajax: {
                    url: "fetch.php", // URL ที่จะดึงข้อมูล
                    type: "POST",
                    data: function (d) {
                        console.log("Sending request data:", d); // ตรวจสอบข้อมูลที่ส่งไป
                        return d;
                    },
                    dataSrc: function (json) {
                        console.log("Received response:", json); // ตรวจสอบข้อมูลที่ได้รับกลับมา
                        if (json.error) {
                            alert(json.error); // แจ้งข้อผิดพลาด
                            return [];
                        }
                        return json.data; // ส่งคืนข้อมูลที่ต้องการแสดง
                    }
                },
                columns: [
                    { data: 'id' },
                    { data: 'name' },
                    { data: 'email' },
                    { data: 'age' }
                ],
                initComplete: function () {
                    console.log("Table initialization complete.");
                }
            });

        });
    </script>

</body>

</html>


//  fetch.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// ตั้งค่าการเชื่อมต่อฐานข้อมูล
$host = 'localhost';
$port = '3306';
$dbname = 'your_database';
$username = 'root';
$password = 'root';

$dsn = "mysql:host=$host;port=$port;dbname=$dbname;charset=utf8";
$pdo = new PDO($dsn, $username, $password);

// ตรวจสอบว่ามี POST data หรือไม่
if (empty($_POST)) {
    echo json_encode(["error" => "No POST data received"]);
    exit;
}

// รับค่าจาก DataTable ผ่าน POST
$draw = $_POST['draw'];
$start = $_POST['start'];
$length = $_POST['length'];
$searchValue = $_POST['search']['value'] ?? '';
$orderColumnIndex = $_POST['order'][0]['column'];
$orderDir = $_POST['order'][0]['dir'];

// กำหนดชื่อคอลัมน์ที่ใช้ในการเรียงลำดับ
$columns = ['id', 'name', 'email', 'age'];

// Query ดึงข้อมูลหลัก
$query = "SELECT * FROM users WHERE 1 ";
$params = [];

// กรองข้อมูลตามเงื่อนไขการค้นหา
if (!empty($searchValue)) {
    $query .= "AND (name LIKE :search OR email LIKE :search) ";
    $params[':search'] = '%' . $searchValue . '%';
}

// เพิ่มเงื่อนไขการเรียงลำดับ
$orderColumn = $columns[$orderColumnIndex];
$query .= "ORDER BY $orderColumn $orderDir ";

// เพิ่มการแบ่งหน้า
$start = (int)$start;
$length = (int)$length;
$query .= "LIMIT $start, $length";

// รันคำสั่ง SQL
try {
    $stmt = $pdo->prepare($query);
    $stmt->execute($params);
    $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Exception $e) {
    echo json_encode(["error" => $e->getMessage()]);
    exit;
}

// ดึงจำนวนข้อมูลทั้งหมด
$totalRecordsQuery = "SELECT COUNT(*) FROM users";
$totalRecords = $pdo->query($totalRecordsQuery)->fetchColumn();

// ดึงจำนวนข้อมูลที่ค้นหา
$filteredRecords = $totalRecords;
if (!empty($searchValue)) {
    $filteredRecordsQuery = "SELECT COUNT(*) FROM users WHERE name LIKE :search OR email LIKE :search";
    $filteredStmt = $pdo->prepare($filteredRecordsQuery);
    $filteredStmt->execute([':search' => '%' . $searchValue . '%']);
    $filteredRecords = $filteredStmt->fetchColumn();
}

// สร้าง response ในรูปแบบ JSON
$response = [
    "draw" => intval($draw),
    "recordsTotal" => $totalRecords,
    "recordsFiltered" => $filteredRecords,
    "data" => $data
];

// Output JSON response
header('Content-Type: application/json');
$response_json = json_encode($response);
if (json_last_error() !== JSON_ERROR_NONE) {
    echo json_encode(["error" => json_last_error_msg()]);
} else {
    echo $response_json;
}
?>

คำอธิบายของโค้ด

ไฟล์ HTML และ JavaScript

  • เราสร้างตาราง <table> ที่มี ID data-table และโหลด DataTables พร้อมกับปุ่มต่าง ๆ
  • การใช้ AJAX เพื่อดึงข้อมูลจาก fetch.php โดยส่งข้อมูลที่จำเป็น เช่น การค้นหา, การเรียงลำดับ และการแบ่งหน้า
  • ใช้ฟังก์ชัน console.log เพื่อตรวจสอบข้อมูลที่ส่งและรับจากเซิร์ฟเวอร์

ไฟล์ PHP (fetch.php)

  • ตั้งค่าการเชื่อมต่อฐานข้อมูล MySQL โดยใช้ PDO
  • ตรวจสอบการส่งข้อมูล POST จาก DataTables และจัดการการค้นหา, การเรียงลำดับ, และการแบ่งหน้าข้อมูล
  • ดึงข้อมูลจากฐานข้อมูลและส่งคืนในรูปแบบ JSON ซึ่ง DataTables สามารถเข้าใจได้

Test Data


-- Create the users table
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255),
    email VARCHAR(255),
    age INT
);

-- Insert test data
INSERT INTO users (name, email, age) VALUES
('John Doe 1', '[email protected]', 25),
('John Doe 2', '[email protected]', 26),
('John Doe 3', '[email protected]', 27),
('John Doe 4', '[email protected]', 28),
('John Doe 5', '[email protected]', 29),
('John Doe 50', '[email protected]', 34);

สรุป

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้างตารางที่มีความสามารถในการค้นหาและเรียงลำดับได้ โดยการใช้ DataTables ร่วมกับ AJAX และ PHP ในการดึงข้อมูลจากฐานข้อมูล MySQL