สอนใช้ DataTable เบื้องต้น — แค่ใส่โค้ดเดียว ตารางก็เทพ!
โค้ดแซ่บสาย Dev | 3 พ.ย. 2568
💡 DataTable คืออะไร?
ก่อนอื่นมาทำความรู้จักกันก่อน
DataTable คือ ปลั๊กอิน (plugin) เสริมของ jQuery ที่ช่วยเปลี่ยนตาราง HTML ธรรมดา ๆ
ให้กลายเป็นตารางอัจฉริยะ 💫
ที่สามารถ “ค้นหา 🔍, เรียงข้อมูล ⬆⬇, และแบ่งหน้าอัตโนมัติ” ได้ทันที
โดยไม่ต้องเขียน JavaScript เพิ่มเองให้ปวดหัวเลย
🧩 ขั้นตอนที่ 1: เตรียมไฟล์พื้นฐาน
ให้เริ่มจากหน้าเว็บ HTML ธรรมดาก่อน แล้วใส่โค้ดต่อไปนี้
(แนะนำให้ทดลองใน VS Code หรือ Notepad++ ก็ได้)
เริ่มจากสร้างไฟล์ชื่อ
datatable-basic.htmlแล้วใส่โค้ดนี้ลงไปเลย
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>ตัวอย่าง DataTable เบื้องต้น</title>
<!-- โหลด CSS ของ DataTable -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<!-- โหลด jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- โหลด JS ของ DataTable -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
</head>
<body>
<h2>📚 ตัวอย่างตารางนักเรียน</h2>
<table id="studentTable" class="display">
<thead>
<tr>
<th>ลำดับ</th>
<th>ชื่อ - สกุล</th>
<th>แผนกวิชา</th>
<th>ระดับชั้น</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>อธิปไตย ใจดี</td><td>เทคโนโลยีธุรกิจดิจิทัล</td><td>ปวช. 2</td></tr>
<tr><td>2</td><td>ปิยวดี มั่นคง</td><td>คอมพิวเตอร์ธุรกิจ</td><td>ปวช. 3</td></tr>
<tr><td>3</td><td>อนวัช แสงทอง</td><td>เทคโนโลยีสารสนเทศ</td><td>ปวส. 1</td></tr>
<tr><td>4</td><td>จารุวรรณ ใจงาม</td><td>เทคโนโลยีธุรกิจดิจิทัล</td><td>ปวช. 3</td></tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#studentTable').DataTable();
});
</script>
</body>
</html>
เมื่อเปิดในเบราว์เซอร์ จะเห็นว่าตารางของเรามีช่องค้นหา 🔍 และสามารถคลิกเรียงลำดับข้อมูลได้ทันที!
🛠️ ขั้นตอนที่ 2: แปลข้อความเป็นภาษาไทย
อยากให้เมนูต่าง ๆ เช่น “Search”, “Next”, “Previous” เป็นภาษาไทยไหม? แค่เพิ่มโค้ดนี้เข้า
$(document).ready()
$('#studentTable').DataTable({
language: {
url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/th.json'
}
});
เพียงเท่านี้ DataTable ก็จะพูดภาษาไทยกับเราแล้ว 🇹🇭
🎨 ขั้นตอนที่ 3: แต่งตารางให้สวยด้วย Bootstrap
อยากให้ตารางดูเรียบหรู มีระดับเหมือนเว็บมืออาชีพ? เพิ่มลิงก์ Bootstrap แล้วเปลี่ยนคลาสของตารางได้เลย 👇
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<table id="studentTable" class="table table-striped table-bordered"> ... </table>
จากตารางธรรมดา ➡️ กลายเป็นตารางระดับมือโปรในพริบตา 💫
📘 สรุปความรู้สำหรับนักเรียน
| สิ่งที่ได้เรียนรู้ | สรุปใจความ |
|---|---|
| DataTable คืออะไร | ปลั๊กอิน jQuery ที่ทำให้ตาราง HTML ค้นหา / เรียง / แบ่งหน้าอัตโนมัติ |
| ใช้อย่างไร | เพิ่มลิงก์ DataTable + เรียกใช้คำสั่ง $('#id').DataTable() |
| นำไปใช้ทำอะไรได้บ้าง | ตารางข้อมูลนักเรียน, สินค้า, ลูกค้า, คะแนน ฯลฯ |
| เสริมภาษาไทย | เพิ่ม language: { url: '...th.json' } |