Skip to main content

การใช้งาน Angular DataTable With PHP/MySQL

สวัสดีครับ บทความนี้เรายังอยู่ในเรื่องของ Angular ต่อครับ โดยในตอนนี้จะเป็นการแนะนำ การใช้งาน DataTable กับ Angular กันครับ

ในตัวอย่างนี้จะใช้ Angular  DataTables ซึ่งได้มีการ Integrate ระหว่าง Angular และ Plugin DataTable มาให้เรียบร้อยแล้ว


สามารถเข้าไปดูตัวอย่างการใช้งานได้ที่  https://l-lin.github.io/angular-datatables

การติดตั้ง ก่อนอื่นเราต้องติดตั้ง Angular Cli กันก่อน

หากใครติดตั้งแล้ว สามารถ ข้ามขั้นตอนนี้ไปได้ครับ

ตัวอย่าง เราจะสร้าง Project ด้วยคำสั่ง  ng new datatable

จากนั้นเราจะมาติดตั้ง npm dependencies เพิ่มเติมดังนี้

เมื่อติดตั้งเรียบร้อยให้เปิดไปที่ Project เราครับ และ เปิดไฟล์ angular.json เพื่อตั้งค่าเพิ่มเติมครับ
ตัวอย่างสร้างไว้ที่ D:/angular/datatable/angular.json เพิ่ม Code ดังภาพ

ต่อมาเรามาแก้ไขในส่วนของไฟล์  app.module.ts กันครับ

เริ่มใช้งาน Angular DataTable

ในตัวอย่างแรกนี้จะเป็นการดึงข้อมูลจาก API  https://jsonplaceholder.typicode.com/posts
โดยจะเป็นการดึงข้อมูลมาทั้งหมดแล้วค่อยนำมาแสดง ในตาราง Datatable

แก้ไขในส่วนของ Component กันก่อน ไปที่ไฟล์ app.component.ts
ตัวอย่างสร้างไฟล์ไว้ที่ D:/angular/datatable/src/app/app.component.ts
แก้ไขไฟล์ดังนี้

แก้ไขในส่วนของ View ไปที่ ไฟล์ app.component.html
ตัวอย่างสร้างไฟล์ไว้ที่ D:/angular/datatable/src/app/app.component.html
แก้ไขไฟล์ดังนี้

เมื่อลอง ใช้คำสั้ง  ng serve เพื่อรัน Server ไปที่ URL : http://localhost:4200 หากไม่มีอะไรผิดพลาดจะแสดงหน้าจอดังนี้

การใช้งาน Angular Server side the Angular way

ตัวอย่างต่อไปจะเป็นการเรียกใช้งานแบบ Server side the Angular way คือการดึงข้อมูลจาก Server มาแสดงทีละหน้า เหมาะสำหรับ กรณีที่มีข้อมูลใน Database เป็นจำนวนมาก ไม่สามารถ Load ทั้งหมดก่อนแล้วค่อยมาแสดงแบบในตัวอย่างแรกได้

ในตัวอย่างนี้เราจะสร้าง API ไว้ใช้เองครับ สร้าง Database ชื่อ users_database และ สร้างตาราง employees ดังนี้

จากนั้นใส่ข้อมูลตัวอย่างดังนี้ครับ

ในส่วนของ Code Api เราจะใช้ PHP ในการดึงข้อมูลจาก MySQL มาแสดง โดยจะมีการรับค่า ตัวแปร Start เพื่อแสดงข้อมูลทีละหน้าครับ ตัวอย่างไฟล์ employees.php

เมื่อเรียกใช้งานจะแสดงข้อมูลดังภาพ

จากนั้นเรามาแก้ไขในส่วนของ Angular กันต่อไปที่ app.component.ts แก้ไข Code ดังนี้

แก้ไขในส่วนของ View  ที่ไฟล์ app.component.html

สุดท้ายแก้ไข CSS ที่ไฟล์ src/app/styles.css
ตัวอย่างแก้ไขที่ D:/angular/datatable/src/app/styles.css
แก้ไข Code css ดังนี้

จากนั้นลอง Run Server อีกครั้งด้วย คำสั่ง  ng serve หากไม่มีอะไรผิดพลาดจะแสดงตัวอย่างดังภาพ

การทำงานของ Datatable ในตัวอย่างนี้จะทำการดึงข้อมูลจาก API มาแสดงทีละ 1 หน้าครับ

ขอขอบคุณข้อมูลจาก

https://jsonplaceholder.typicode.com

https://l-lin.github.io/angular-datatables

https://www.myprogrammingtutorials.com/create-pagination-with-php-and-mysql.html