การติดตั้งใช้งาน Datatables กับการดึงข้อมูลแบบ AJAX Server-side [PHP+MySQL]

DataTables เป็นส่วนเสริมของ jQuery (Javascript library) ซึ่ง Datatables เป็นเครื่องมือที่มีความหยืดหยุ่นในการใช้งาน ได้หลากหลายรูปแบบ โดย DataTables จะนำข้อมูลออกมาแสดงในรูปแบบของตาราง มีการเรียงลำดับตามคอลัมน์ มีการค้นหา และที่สำคัญสุดมีการจัดการในเรื่องของการแบ่งหน้าของตารางอีกด้วย และดึงข้อมูลแบบ AJAX โดยดึงข้อมูลที่ใช้จริงมาแสดง เช่น ดึงข้อมูลที่หน้า 5 จำนวน 10 แถว เป็นต้น โดยเพียงการเขียนโค๊ดเพียงไม่กี่บรรทัดเท่านั้นเอง

สำหรับ source code DataTables Plugin สามารถดาวน์โหลดได้ฟรี ครับ

ซึ่งเนื้อหาบทความนี้ จะสอนวิธีการติดตั้ง ตั้งแต่เริ่มต้นพร้อมคำอธิบาย รูปภาพประกอบกันไปเลยเพื่อให้ผู้อ่าน ได้มีความเข้าใจได้ง่ายขึ้น

ทดสอบการใช้งาน (DEMO) คลิกที่นี้เพื่อทดสอบ

เรามาเริ่มกันเลยดีกว่า วิธีการติดตั้งขั้นตอนแรกให้เราไปโหลด Sourcecode DataTables จากลิงค์ดาวน์โหลดจากเว็บหลักที่นี้ https://datatables.net/download/packages

 

หลักจากนั้นให้เราแตกไฟล์ Sourcecode ที่ได้โหลดมา แล้ว Copy โฟล์เดอร์ media มาทั้งหมดมาวางไว้ในภายในโปรเจคที่เราจะเรียกใช้งานนะครับ

ต่อจากนั้นโหลดไฟล์ฐานข้อมูลที่ชื่อ datatables.sql เพื่อใช้สำหรับเป็นข้อมูลทดสอบสำหรับบทความนี้นะครับ คลิกเพื่อดาวน์โหลด

ดาวน์โหลดไฟล์ ssp.class.php คลิกเพื่อดาวน์โหลด ไฟล์นี้คือชุดคำสั่งเรียกข้อมูลจาก mysql

ดาวน์โหลดมาแล้วให้ทำการ import ข้อมูลลงสู่ฐานข้อมูล วิธีการคือ
1. สร้างชื่อฐานข้อมูลในตัวอย่างบทความนี้ใช้ชื่อ datatables พอใส่ชื่อเสร็จกดปุ่ม Create ได้เลย

2. คลิกเลือกเมนู import ตรงเมนูบน

3. คลิกเลือกปุ่ม “เลือกไฟล์”แล้วเลือกไฟล์ฐานข้อมูลที่เราดาวน์โหลดมาเมื่อกี้ครับ (datatables.sql)

หลักจากที่เรา import ข้อมูลเสร็จแล้ว ขั้นตอนต่อไปเป็นการเรียกใช้งานนะครับ
การเรียกใช้งานจำเป็นต้องมีไฟล์ jquery นะครับ ถ้าหากไม่มี datatables จะไม่ทำงาน!
1. ให้ include ไฟล์ js — jquery.dataTables.js และไฟล์ css — jquery.dataTables.min.css ไว้บน <header>

2. ในส่วนของเนื้อหาที่จะแสดงตารางข้อมูล ให้นำโค๊ดตัวอย่างด้านล่างนี้ใส่ไปครับ

3. เขียนคำสั่ง javascript ให้เรียกใช้งาน

คำอธิบายของโค๊ดนี้คือ ดึงข้อมูลแบบ server-side โดยให้ไฟล์ server_processing.php ประมวลผลข้อมูลแล้วนำกลับมาใช้ที่หน้าตารางนี้ โดยโค๊ดของไฟล์ server_processing.php จะเรียกข้อมูลมาเฉพาะที่จะแสดงผลเท่านั้น เช่นดึงข้อมูลหน้า 5 และดึงมาเพียง 10 แถวเท่านั้น
ให้เราสร้างไฟล์ server_processing.php และนำโค๊ดด้านล่างนี้วาง แล้วกด Save ครับ

คำอธิบาย
เป็นไฟล์ที่ใช้ในการดึงข้อมูลจากฐานข้อมูลมาแล้วมาจัดรูปแบบข้อมูลให้อยู่ในแบบที่ต้องการ โดยจัดเป็นแบบ Array ส่วนไฟล์ที่เรียกใช้ฐานข้อมูลคือไฟล์ ssp.class.php
ในส่วนของรายละเอียดการเชื่อมต่อฐานข้อมูลตรงนี้ เราต้องใส่ให้ถูกต้องกับข้อมูล Server ของเราด้วยครับ

ลองดูผลลัพธ์ด้านล่าง

ต่อ… สำหรับใครต้องการผลรวมแต่ละหน้า สามารถทำได้โดยเขียน script javascript เพิ่มเติมใน

ตามโค๊ดด้านล่างนี้นะครับ

 

จบแล้วสำหรับบทความนี้
สำหรับ Source code ตัวอย่าง แบบเต็มสามารถดาวน์โหลดได้ที่ https://github.com/ipball/ex_datatables/archive/master.zip

หรือ Clone Git https://github.com/ipball/ex_datatables

ทางผู้เขียนคงคิดว่าน่าจะมีประโยชน์สำหรับคนที่เข้ามาอ่านไม่มากก็น้อย แต่ก็ดีใจครับ ที่ยังมี ฮ่าๆ หากมีข้อสงสัยตรงไหน คอมเม้นไว้ด้านล่างเลยครับ…ขอบคุณครับ

You May Also Like

About the Author: benext

โปรแกรมเมอร์ ติดต่อ : itoffside@hotmail.com
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

19 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
yee
yee
4 years ago

อยากให้นำออกจากฐานข้อมูลเป็นภาษาไทยได้มัยค่ะ พอดีน้องเอาออกมาเป็นภาาาเอเลียน ต้องทำยังไงค่ะ

Champ
Champ
3 years ago

สอบถามครับ datatable นี้สามารถค้นหาชื่อเป็นภาษาไทยได้หรือเปล่า ครับ

oleyliove
oleyliove
2 years ago

ขอบคุณสำหรับความรู้ครับ

jojobaoil
jojobaoil
2 years ago

เพิ่มเงื่อนไข where ยังไงครับ

ทวีศักดิ์
ทวีศักดิ์
2 years ago

ผมติดปัญหาเรื่อง ค่าเริ่มต้นไม่มีข้อมูล จะต้องประกาศตัวแปรหรือกำหนดอย่างไรครับ
ขอคำแนะนำหน่อยครับ

kong
kong
1 year ago

เราจะเปลี่ยนปุ่มค้นหาให้เป็นภาษาไทยต้องทําอย่างไร

Plz
Plz
Reply to  benext
1 year ago

ใส่ไหนครับ TT

Kanokchai
Kanokchai
Reply to  benext
1 year ago

ทำยังไงเหรอครับ ขอแบบละเอียดได้ไหมครับ ผมเพิ่งเริ่มเขียนเว็ป

KC
KC
1 year ago

สามารถใช้ Query ของเราได้ไหมครับ สามารถใส่ได้ตรงไหน

BB
BB
1 year ago

ไฟล์ ssp.class.php ไปดาวโหลดได้จากที่ใหนครับ

joppy
joppy
1 year ago

เราสามารถเพิ่มปุ่ม Edit เพื่อเรียกใช้ modal ได้ไหมครับ

joppy
joppy
Reply to  benext
1 year ago

เพิ่มยังไงครับ ผมนั่ง งง ไม่รู้จะเพิ่มตรงไหน