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 ได้เลยครับ

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

วิธีใช้ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์... วิธีใช้ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์ การพัฒนาเว็บไซต์ในปัจจุบันนั้น นอกจากเรื่องความเร็ว และการพัฒนาให้รองรับการแสดงผลในหลากหลาย device ...
วิธีแก้ Error Foreign key constraint ใน MySQL... วิธีแก้ Error Foreign key constraint ใน MySQL วิธีแก้ Error Foreign key constraint is incorrectly formed วิธีแก้ Error Foreign key constraint is inc...
การพัฒนาเว็บไซต์ ภาษา PHP โดยใช้ Web Framework VS ... การพัฒนาเว็บไซต์ ภาษา PHP โดยใช้ Web Framework VS Core PHP การพัฒนาเว็บไซต์ ภาษา PHP โดยใช้ Web Framework VS Core PHP Core PHP คืออะไร Core PHP คือ...
วิธีทำ URL redirect โดยใช้ .htaccess และคำสั่งอื่น... วิธีทำ URL redirect โดยใช้ .htaccess และคำสั่งอื่น ๆ วิธีทำ URL redirect โดยใช้ .htaccess และคำสั่งอื่น ๆ โดยปกติเราจะสามารถเข้าชมเว็บไซต์ได้โดย...

Leave a Reply

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