Site icon บริษัท โค๊ดบี จำกัด

วิธีใช้งาน Datatable.js แบบ Join ข้อมูลหลาย Table และหลาย เงื่อนไข

codebee
วิธีใช้งาน-datatables-js

วิธีใช้งาน-datatables-js

&NewLine;<p class&equals;"wp-block-paragraph">วิธีใช้งาน Datatable&period;js โดยการ Query ข้อมูลขึ้นมาแสดงในรูปแบบของตารางข้อมูล มีเรื่องน่าปวดหัวที่เรามักจะเจอคือ ข้อมูลที่ดึงขึ้นมาแสดงนั้น ไม่ได้ถูกออกแบบให้อยู่ในตารางข้อมูลเดียวกัน แต่มักจะถูกเก็บไว้ในหลายตารางข้อมูล <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">และบางทีการแสดงข้อมูลแบบรายงาน มักจะมีเรื่องของการ Filter ข้อมูลในตารางเพิ่มเข้ามาอีก คือมีเงื่อนใขในการแสดงผลของข้อมูล เช่น การแสดงผลแบบกำหนดวันที่เริ่มต้น และวันที่สิ้นสุดของข้อมูล กำหนดประเภท หรือสถานะของข้อมูลเป็นต้น<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">วิธีใช้ datatables join ข้อมูล 2 ตาราง<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ในตัวอย่างเราจะสร้างตารางข้อมูลขึ้นมา 2 ตาราง คือ bill และ expense ทั้ง 2 ตารางมี primary key ที่เชื่อมโยงกันอยู่ และต้องการให้ข้อมูลจากทั้ง 2 ตารางมาแสดงผลใน datatables ตารางละ 1 column <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ส่วนของ javascript จะเขียนคำสั่งเบื้องต้นได้ดังนี้ &lpar; main&period;js &rpar;<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"php" class&equals;"language-php">&NewLine;&dollar;&lpar;'&period;reportTable'&rpar;&period;DataTable&lpar;&lbrace;&NewLine; "columns"&colon; &lbrack;&NewLine; &lbrace;"width"&colon; "10&percnt;" &rcub;&comma;&NewLine; &lbrace;"width"&colon; "10&percnt;" &rcub;&comma;&NewLine; &rsqb;&comma;&NewLine; "ajax"&colon; &lbrace;&NewLine; "url"&colon; "bill&period;php"&comma;&NewLine; "type"&colon; "POST"&comma;&NewLine; "data"&colon; function &lpar;post&rpar; &lbrace;&NewLine;&NewLine; &rcub;&NewLine; &rcub;&comma;&NewLine; "serverSide"&colon; true&comma;&NewLine;&rcub;&rpar;&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">และส่วนของ server side &lpar; bill&period;php &rpar; จะเขียนคำสั่งในการ join ข้อมูลและ return ค่ากลับไปแสดงผลได้ดังนี้<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"php" class&equals;"language-php"> require APPPATH &period; 'libraries&sol;ssp&period;customized&period;class&period;php'&semi;&NewLine; &dollar;table &equals; 'bill'&semi;&NewLine; &dollar;primaryKey &equals; 'uid'&semi;&NewLine; &dollar;joinQuery &equals; ""&semi;&NewLine; &dollar;extraWhere &equals; ""&semi;&NewLine; &dollar;groupBy &equals; ""&semi;&NewLine; &dollar;having &equals; ""&semi;&NewLine; &NewLine; &dollar;table&lowbar;arr &equals; array&lpar;&NewLine; array&lpar;&NewLine; 'db' &equals;&gt&semi; 'bill&period;bill&lowbar;datetime'&comma; 'dt' &equals;&gt&semi; 0&comma; 'field' &equals;&gt&semi; 'bill&lowbar;datetime'&comma;&NewLine; 'formatter' &equals;&gt&semi; function &lpar;&dollar;bill&lowbar;datetime&comma; &dollar;row&rpar; &lbrace;&NewLine; return &dollar;bill&lowbar;datetime&semi;&NewLine; &rcub;&NewLine; &rpar;&comma;&NewLine; array&lpar;&NewLine; 'db' &equals;&gt&semi; 'expense&period;expense&lowbar;id'&comma; 'dt' &equals;&gt&semi; 1&comma; 'field' &equals;&gt&semi; 'expense&lowbar;id'&comma;&NewLine; 'formatter' &equals;&gt&semi; function &lpar;&dollar;expense&lowbar;id&comma; &dollar;row&rpar; &lbrace;&NewLine; return &dollar;expense&lowbar;id&semi;&NewLine; &rcub;&NewLine; &rpar;&comma;&NewLine; &NewLine; &rpar;&semi;&NewLine; &NewLine; &sol;&sol; เขียนคำสั่ง join ข้อมูล 2 ตาราง คือ bill และ exepense ไว้ที่ query หลัก&NewLine; &dollar;joinQuery &equals; "FROM bill AS bill JOIN expense AS expense ON &lpar;expense&period;expense&lowbar;uid &equals; bill&lowbar;history&period;expense&lowbar;uid&rpar;"&semi;&NewLine;&NewLine; echo json&lowbar;encode&lpar;&NewLine; SSP&colon;&colon;simple&lpar;&dollar;this-&gt&semi;input-&gt&semi;post&lpar;&rpar;&comma; &dollar;sql&lowbar;details&comma; &dollar;table&comma; &dollar;primaryKey&comma; &dollar;table&lowbar;arr&comma; &dollar;joinQuery&comma; &dollar;extraWhere&comma; &dollar;groupBy&comma; &dollar;having&rpar;&NewLine; &rpar;&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">การ Filter &lpar; กรองข้อมูล &rpar; โดยใช้ extraWhere <&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">กรณีที่เราต้องการกรองข้อมูลที่จะแสดงผลในตาราง เช่น การกำหนดวันเริ่มต้น วันสิ้นสุดของข้อมูล หรือการกำหนดประเภทของข้อมูล เราสามารถใช้ extraWhere เข้ามาช่วยได้<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">เริ่มต้นเลยในส่วนของ javascript ไฟล์ main&period;js ให้เพิ่มตัวแปร ajax post เข้าไปด้วย ตัวอย่างจะเขียนคำสั่งเพิ่มเข้าไปในโค๊ดต้นแบบได้ดังนี้<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"php" class&equals;"language-php">"ajax"&colon; &lbrace;&NewLine; "url"&colon; report&lowbar;billsConfig&period;report&lowbar;bills&lowbar;url&comma;&NewLine; "type"&colon; "POST"&comma;&NewLine; "data"&colon; function &lpar;post&rpar; &lbrace;&NewLine; post&period;expense&lowbar;type &equals; 1&semi;&NewLine; post&period;startDate &equals; '2020-01-01'&semi;&NewLine; post&period;stopDate &equals; '2021-01-01'&semi;&NewLine; post&period;length &equals; 25&semi;&NewLine; &rcub;&NewLine; &rcub;&comma;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ในฝั่ง server side &lpar; bill&period;php &rpar; เราจะเขียนรับตัวแปรและเพิ่ม extraWhere เข้าไป เพื่อทำการกรองข้อมูลประเภทของ expense และ วันเริ่มต้น สิ้นสุดของ bill ได้ดังนี้<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code lang&equals;"php" class&equals;"language-php">&dollar;expensed&lowbar;type &equals; &dollar;&lowbar;POST&lbrack;'expensed&lowbar;type'&rsqb;&semi;&NewLine; &dollar;startDate &equals; &dollar;&lowbar;POST&lbrack;'startDate'&rsqb;&semi;&NewLine; &dollar;endDate &equals; &dollar;&lowbar;POST&lbrack;'endDate'&rsqb;&semi;&NewLine;&NewLine; &sol;&sol; แสดงผลข้อมูลแบบกำหนดวันเริ่มต้น และสิ้นสุดของข้อมูลตาราง bill&NewLine; &dollar;extraWhere &period;&equals; 'DATE&lpar;bill&period;bill&lowbar;datetime&rpar; &gt&semi;&equals; "' &period; &dollar;startDate &period; '" AND DATE&lpar;bill&period;bill&lowbar;datetime&rpar; &lt&semi;&equals; "' &period; &dollar;endDate &period; '"'&semi;&NewLine; &sol;&sol; แสดงผลข้อมูลแบบกำหนดประเภทของข้อมูลตาราง expense&NewLine; &dollar;extraWhere &period;&equals; " AND expense&period;expensed&lowbar;type &equals; " &period; &dollar;expensed&lowbar;type&semi;&NewLine; &NewLine; &dollar;joinQuery &equals; "FROM bill AS bill JOIN expense AS expense ON &lpar;expense&period;expense&lowbar;uid &equals; bill&period;expense&lowbar;uid&rpar;"&semi;&NewLine;&NewLine; echo json&lowbar;encode&lpar;&NewLine; SSP&colon;&colon;simple&lpar;&dollar;this-&gt&semi;input-&gt&semi;post&lpar;&rpar;&comma; &dollar;sql&lowbar;details&comma; &dollar;table&comma; &dollar;primaryKey&comma; &dollar;table&lowbar;arr&comma; &dollar;joinQuery&comma; &dollar;extraWhere&comma; &dollar;groupBy&comma; &dollar;having&rpar;&NewLine; &rpar;&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">จากตัวอย่างโค๊ดการใช้งาน datatables ด้านบน เราสามารถเพิ่มการ join มากกว่า 1 ตาราง ด้วยการเขียนเพิ่มที่ส่วนของ joinQuery และ ถ้าต้องการเพิ่มการ filter &lpar; กรองข้อมูล &rpar; หลายเงื่อนไข ก็สามารถเพิ่มได้ในส่วนของ extraWhere <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">สำหรับการใช้งาน datatables ในการรับโหลดข้อมูลจำนวนมาก สามารถอ่านวิธีการใช้งานได้ที่ <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;datatables-js-ใช้-ajax-โหลดข้อมูลทีละหน้&sol;" target&equals;"&lowbar;blank" rel&equals;"noreferrer noopener">Datatables&period;js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10&comma;000 Row<&sol;a><&sol;p>&NewLine;

Exit mobile version