Datatables-ใช้-Ajax-โหลดข้อมูลทีละหน้าเกิน-10000-Row

Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,000 Row

Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,000 Row

Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้า

สำหรับการแสดงผลข้อมูลในรูปแบบตารางนั้น อีกหนึ่ง plugin ที่ได้รับความนิยมอย่างมากคือ datatables.js เพราะมีความยืดหยุ่นสูงสามารถปรับรูปแบบตารางได้หลากหลาย รองรับ responsive table ใช้งานง่าย เหมาะสำหรับการใช้แสดงผลข้อมูลรูปแบบตารางและทำรายงาน

สำหรับการแสดงผลข้อมูลที่ถูก query มาจากฐานข้อมูลปริมาณมาก ๆ datatables.js ได้ถูกออกแบบมาให้รองรับเรื่องนี้อยู่แล้วนะครับ เพียงแต่การใช้งานจะต้อง ใช้งานในรูปแบบที่ถูกต้องทั้งส่วนของการ query จัดการ format ข้อมูล จนถึงส่งข้อมูลออกมาแสดงผล

ผลการทดสอบ
จากการทดสอบโดยได้สร้างฐานข้อมูลขนาด 70,000×6 Row Column ความหมายคือ มี field ในเทเบิ้ลทั้งหมด 6 Column และมีการ insert ข้อมูลเข้าไปทั้งหมด 70,000 Row แน่นอนว่าถ้าเราใช้การ query มาแสดงผลใน datatable หลัก 10,000 Row ระบบก็คงทำงานไม่ไหวแล้ว

ตัวอย่าง Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,000 Row

วิธีใช้งาน

  • สร้าง html กำหนด ID ให้ table สำหรับใช้กับ datatables plugin

  • เขียน javascript สำหรับโหลดข้อมูล JSON จาก PHP มาแสดงใน Datatables

  • ดาวน์โหลด ssp.class.php ซึ่งพัฒนาโดยทีมพัฒนา datatables.js จากนั้นเขียน PHP เพื่อ Query ข้อมูลดังนี้


นักพัฒนาท่านใดที่ต้องการทดสอบเพิ่มเติม อาจจะลองเพิ่ม row และ column หรืออาจจะเพิ่มการ join ข้อมูลจาก 1 ตาราง เป็น 2 3 ตารางดูครับ เพราะในการใช้งานจริง ข้อมูลที่ใช้แสดงผลอาจจะไม่ได้มาจากตารางเดียว

สำหรับฐานข้อมูลในการทดสอบ สามารถเข้าไปทำ database generate ได้ที่เว็บไซต์ filldb.info ได้เลยครับ

กระทู้ใกล้เคียง

Photoshop ออนไลน์ ทำงานได้ทุกที่ด้วย photopea.com... โดยปกติถ้านึกถึงโปรแกรมที่ใช้สำหรับงานออกแบบในสายงานต่าง ๆ เราจะต้องนึกถึงโปรแกรมอย่าง Adobe Photoshop, Sketch, GIMP, Adobe XD, CorelDraw เป็นอัน...
วิธีทำ LINE Login เข้าสู่ระบบด้วย Line (PHP) บนเว็... LINE Login API คือการเข้าสู่ระบบหรือสมัครสมาชิกแบบ SSO ( Single Sign On ) ความหมายคือการใช้ข้อมูลเดียวกันกับแพลตฟอร์มใด แพลตฟอร์มหนึ่งในการลงทะเบ...
เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed ด้วย... เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed ด้วย Google Fonts เทคนิคเพิ่มความเร็วเว็บไซต์ Google Page Speed Insight ตอน : Google Fonts ทดสอบโดยใช้ ...
วิธี Update ระบบปฏิบัติการ Android เครื่อง Samsung... ไปที่แอพ การตั้งค่า หรือถ้าเครื่องเราตั้งค่าเป็นภาษาอังกฤษ Setting ที่ติดมากับเครื่องที่ใช้ระบบปฏิบัติการ Android เลื่อนหาตัวเลือกที่ชื่อว่า อ...

Leave a Reply

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