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
<table id="authors_table"> <!--กำหนด ID ให้ table สำหรับใช้กับ datatables plugin--> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Birthdate</th> <th>Added</th> </tr> </thead> <tbody> <!--โหลข้อมูล Row x Column เข้ามาแสดงผล--> </tbody> </table>
- เขียน javascript สำหรับโหลดข้อมูล JSON จาก PHP มาแสดงใน Datatables
var authors_table = $("#authors_table").DataTable({ "sPaginationType": "full_numbers", "pageLength": 25 "columns": [ {"width": "10%" }, {"width": "20%" }, {"width": "20%" }, {"width": "10%" }, {"width": "10%" }, {"width": "15%" } ], "processing": true, "serverSide": true, "ajax": "getAuthors.php" });
- ดาวน์โหลด ssp.class.php ซึ่งพัฒนาโดยทีมพัฒนา datatables.js จากนั้นเขียน PHP เพื่อ Query ข้อมูลดังนี้
require 'ssp.class.php'; $table = 'authors'; $primaryKey = 'id'; $columns = array( array( 'db' => 'id', 'dt' => 0 ), array( 'db' => 'first_name', 'dt' => 1 ), array( 'db' => 'last_name', 'dt' => 2 ), array( 'db' => 'email', 'dt' => 3 ), array( 'db' => 'birthdate','dt' => 4 ), array( 'db' => 'added','dt' => 5) ); $sql_details = array( 'user' => 'xxxx', 'pass' => 'xxxx', 'db' => 'xxxx', 'host' => 'localhost' ); echo json_encode( $authors = SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns ) );
นักพัฒนาท่านใดที่ต้องการทดสอบเพิ่มเติม อาจจะลองเพิ่ม row และ column หรืออาจจะเพิ่มการ join ข้อมูลจาก 1 ตาราง เป็น 2 3 ตารางดูครับ เพราะในการใช้งานจริง ข้อมูลที่ใช้แสดงผลอาจจะไม่ได้มาจากตารางเดียว
สำหรับฐานข้อมูลในการทดสอบ สามารถเข้าไปทำ database generate ได้ที่เว็บไซต์ filldb.info ได้เลยครับ