วิธีใช้ DataTables PHP ร่วมกับ MySQL MariaDB

วิธีใช้ DataTables PHP ร่วมกับ MySQL MariaDB บทความนี้สอนวิธีติดตั้ง และเรียกใช้งาน DataTables เพื่อแสดงข้อมูลในรูปแบบตาราง พร้อมความสามารถแบ่งหน้า ค้นหา เรียงลำดับ และอื่นๆ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง วิธีใช้ DataTables PHP ร่วมกับ MySQL MariaDB

1. สร้างฐานข้อมูลชื่อ demo และรันคำสั่ง SQL ด้านล่างเพื่อสร้างตารางชื่อ book พร้อมข้อมูลเริ่มต้น

CREATE TABLE `book` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` char(255) NOT NULL,
  `price` double(12,2) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `title` (`title`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8mb4

INSERT INTO `book` (`id`, `title`, `price`) VALUES
(1, 'HTML&HTML5', 110.00),
(2, 'CSS', 110.00),
(7, 'Python', 200.00),
(12, 'PHP', 130.00),
(15, 'Java', 180.00)

2. ติดตั้ง DataTables และ jQuery ผ่าน CDN ประกอบด้วยไฟล์ css และ js

<link rel="stylesheet" href="//cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<script
  src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
  integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
  crossorigin="anonymous">
</script>
<script src="//cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>  

3. เขียนโปรแกรมเรียกใช้ DataTables PHP ร่วมกับ MySQL MariaDB

<?php
  $c = mysqli_connect("localhost", "root", "", "demo");
  mysqli_query( $c, "SET NAMES UTF8" );

  $sql = " SELECT * FROM book ";
  $q = mysqli_query( $c, $sql );

  echo "
        <div style='margin:3rem'>
        <table id='myTable'>
        <thead>
            <tr>
                <th>ลำดับ</th>
                <th>หนังสือ</th>
                <th>ราคา</th>
            </tr>
        </thead>
      ";
  
  $no = 1;

  while( $f = mysqli_fetch_assoc( $q ) ) {

    echo "
            <tr>
              <td>".$no."</td>
              <td>".$f['title']."</td>
              <td>".$f['price']."</td>
            </tr>
          ";
    $no++;

  }

  echo "</table></div>";
  mysqli_close( $c );
?>

<script>
  $(document).ready( function () {
      $('#myTable').DataTable();
  });
</script>

วิธีใช้ DataTables PHP ร่วมกับ MySQL MariaDB มีรายละเอียดขั้นตอนดังนี้

1. ติดตั้ง DataTables และ jQuery ในเว็บไซต์ที่ต้องการใช้งาน DataTables

2. กำหนด id ให้กับตารางที่ต้องการใช้งาน DataTables เช่น myTable

3. ใช้คำสั่ง $('#myTable').DataTable() เพื่อใช้ DataTables กับตาราง id = myTable