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

<h2>Datatables&period;js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10&comma;000 Row<&sol;h2>&NewLine;<p><strong>Datatables&period;js ใช้ Ajax โหลดข้อมูลทีละหน้า<&sol;strong><&sol;p>&NewLine;<p>สำหรับการแสดงผลข้อมูลในรูปแบบตารางนั้น อีกหนึ่ง plugin ที่ได้รับความนิยมอย่างมากคือ datatables&period;js เพราะมีความยืดหยุ่นสูงสามารถปรับรูปแบบตารางได้หลากหลาย รองรับ responsive table ใช้งานง่าย เหมาะสำหรับการใช้แสดงผลข้อมูลรูปแบบตารางและทำรายงาน<&excl;--more--><&sol;p>&NewLine;<p>สำหรับการแสดงผลข้อมูลที่ถูก query มาจากฐานข้อมูลปริมาณมาก ๆ datatables&period;js ได้ถูกออกแบบมาให้รองรับเรื่องนี้อยู่แล้วนะครับ เพียงแต่การใช้งานจะต้อง ใช้งานในรูปแบบที่ถูกต้องทั้งส่วนของการ query จัดการ format ข้อมูล จนถึงส่งข้อมูลออกมาแสดงผล<&sol;p>&NewLine;<p><strong>ผลการทดสอบ<&sol;strong><br &sol;>&NewLine;จากการทดสอบโดยได้สร้างฐานข้อมูลขนาด 70&comma;000&&num;215&semi;6 Row Column ความหมายคือ มี field ในเทเบิ้ลทั้งหมด 6 Column และมีการ insert ข้อมูลเข้าไปทั้งหมด 70&comma;000 Row แน่นอนว่าถ้าเราใช้การ query มาแสดงผลใน datatable หลัก 10&comma;000 Row ระบบก็คงทำงานไม่ไหวแล้ว <&sol;p>&NewLine;<blockquote><p><a href&equals;"https&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;exam3&sol;datatables&sol;" rel&equals;"noopener" target&equals;"&lowbar;blank">ตัวอย่าง Datatables&period;js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10&comma;000 Row<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><strong>วิธีใช้งาน<&sol;strong><&sol;p>&NewLine;<ul>&NewLine;<li>สร้าง html กำหนด ID ให้ table สำหรับใช้กับ datatables plugin&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;table id&equals;"authors&lowbar;table"&gt&semi; &lt&semi;&excl;--กำหนด ID ให้ table สำหรับใช้กับ datatables plugin--&gt&semi; &NewLine; &lt&semi;thead&gt&semi; &NewLine; &lt&semi;tr&gt&semi; &NewLine; &lt&semi;th&gt&semi;ID&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;th&gt&semi;First Name&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;th&gt&semi;Last Name&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;th&gt&semi;Email&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;th&gt&semi;Birthdate&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;th&gt&semi;Added&lt&semi;&sol;th&gt&semi; &NewLine; &lt&semi;&sol;tr&gt&semi; &NewLine; &lt&semi;&sol;thead&gt&semi; &NewLine; &lt&semi;tbody&gt&semi; &NewLine; &NewLine; &lt&semi;&excl;--โหลข้อมูล Row x Column เข้ามาแสดงผล--&gt&semi; &NewLine; &NewLine; &lt&semi;&sol;tbody&gt&semi; &NewLine;&lt&semi;&sol;table&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>เขียน javascript สำหรับโหลดข้อมูล JSON จาก PHP มาแสดงใน Datatables&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >var authors&lowbar;table &equals; &dollar;&lpar;"&num;authors&lowbar;table"&rpar;&period;DataTable&lpar;&lbrace; &NewLine; "sPaginationType"&colon; "full&lowbar;numbers"&comma; &NewLine; "pageLength"&colon; 25 &NewLine; "columns"&colon; &lbrack; &NewLine; &lbrace;"width"&colon; "10&percnt;" &rcub;&comma; &NewLine; &lbrace;"width"&colon; "20&percnt;" &rcub;&comma; &NewLine; &lbrace;"width"&colon; "20&percnt;" &rcub;&comma; &NewLine; &lbrace;"width"&colon; "10&percnt;" &rcub;&comma; &NewLine; &lbrace;"width"&colon; "10&percnt;" &rcub;&comma; &NewLine; &lbrace;"width"&colon; "15&percnt;" &rcub; &NewLine; &rsqb;&comma; &NewLine; "processing"&colon; true&comma; &NewLine; "serverSide"&colon; true&comma; &NewLine; "ajax"&colon; "getAuthors&period;php" &NewLine;&rcub;&rpar;&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li><a href&equals;"https&colon;&sol;&sol;github&period;com&sol;DataTables&sol;DataTables&sol;blob&sol;master&sol;examples&sol;server&lowbar;side&sol;scripts&sol;ssp&period;class&period;php" rel&equals;"noopener" target&equals;"&lowbar;blank">ดาวน์โหลด ssp&period;class&period;php<&sol;a> ซึ่งพัฒนาโดยทีมพัฒนา datatables&period;js จากนั้นเขียน PHP เพื่อ Query ข้อมูลดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >require 'ssp&period;class&period;php'&semi; &NewLine;&dollar;table &equals; 'authors'&semi; &NewLine;&dollar;primaryKey &equals; 'id'&semi; &NewLine;&dollar;columns &equals; array&lpar; &NewLine;&Tab;array&lpar; 'db' &equals;&gt&semi; 'id'&comma; 'dt' &equals;&gt&semi; 0 &rpar;&comma; &NewLine;&Tab;array&lpar; 'db' &equals;&gt&semi; 'first&lowbar;name'&comma; 'dt' &equals;&gt&semi; 1 &rpar;&comma; &NewLine;&Tab;array&lpar; 'db' &equals;&gt&semi; 'last&lowbar;name'&comma; 'dt' &equals;&gt&semi; 2 &rpar;&comma; &NewLine;&Tab;array&lpar; 'db' &equals;&gt&semi; 'email'&comma; 'dt' &equals;&gt&semi; 3 &rpar;&comma; &NewLine;&Tab;array&lpar; 'db' &equals;&gt&semi; 'birthdate'&comma;'dt' &equals;&gt&semi; 4 &rpar;&comma; &NewLine;&Tab;array&lpar; 'db' &equals;&gt&semi; 'added'&comma;'dt' &equals;&gt&semi; 5&rpar; &NewLine;&rpar;&semi; &NewLine; &NewLine;&dollar;sql&lowbar;details &equals; array&lpar; &NewLine;&Tab;'user' &equals;&gt&semi; 'xxxx'&comma; &NewLine;&Tab;'pass' &equals;&gt&semi; 'xxxx'&comma; &NewLine;&Tab;'db' &equals;&gt&semi; 'xxxx'&comma; &NewLine;&Tab;'host' &equals;&gt&semi; 'localhost' &NewLine;&rpar;&semi; &NewLine; &NewLine;echo json&lowbar;encode&lpar; &NewLine;&Tab;&dollar;authors &equals; SSP&colon;&colon;simple&lpar;&dollar;&lowbar;GET&comma; &dollar;sql&lowbar;details&comma; &dollar;table&comma; &dollar;primaryKey&comma; &dollar;columns &rpar; &NewLine;&rpar;&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<p>นักพัฒนาท่านใดที่ต้องการทดสอบเพิ่มเติม อาจจะลองเพิ่ม row และ column หรืออาจจะเพิ่มการ join ข้อมูลจาก 1 ตาราง เป็น 2 3 ตารางดูครับ เพราะในการใช้งานจริง ข้อมูลที่ใช้แสดงผลอาจจะไม่ได้มาจากตารางเดียว<br &sol;>&NewLine;<&sol;br>สำหรับฐานข้อมูลในการทดสอบ สามารถเข้าไปทำ database generate ได้ที่เว็บไซต์ filldb&period;info ได้เลยครับ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;