วิธีใช้งาน Datatable.js โดยการ Query ข้อมูลขึ้นมาแสดงในรูปแบบของตารางข้อมูล มีเรื่องน่าปวดหัวที่เรามักจะเจอคือ ข้อมูลที่ดึงขึ้นมาแสดงนั้น ไม่ได้ถูกออกแบบให้อยู่ในตารางข้อมูลเดียวกัน แต่มักจะถูกเก็บไว้ในหลายตารางข้อมูล
และบางทีการแสดงข้อมูลแบบรายงาน มักจะมีเรื่องของการ Filter ข้อมูลในตารางเพิ่มเข้ามาอีก คือมีเงื่อนใขในการแสดงผลของข้อมูล เช่น การแสดงผลแบบกำหนดวันที่เริ่มต้น และวันที่สิ้นสุดของข้อมูล กำหนดประเภท หรือสถานะของข้อมูลเป็นต้น
วิธีใช้ datatables join ข้อมูล 2 ตาราง
ในตัวอย่างเราจะสร้างตารางข้อมูลขึ้นมา 2 ตาราง คือ bill และ expense ทั้ง 2 ตารางมี primary key ที่เชื่อมโยงกันอยู่ และต้องการให้ข้อมูลจากทั้ง 2 ตารางมาแสดงผลใน datatables ตารางละ 1 column
ส่วนของ javascript จะเขียนคำสั่งเบื้องต้นได้ดังนี้ ( main.js )
$('.reportTable').DataTable({
"columns": [
{"width": "10%" },
{"width": "10%" },
],
"ajax": {
"url": "bill.php",
"type": "POST",
"data": function (post) {
}
},
"serverSide": true,
});
และส่วนของ server side ( bill.php ) จะเขียนคำสั่งในการ join ข้อมูลและ return ค่ากลับไปแสดงผลได้ดังนี้
require APPPATH . 'libraries/ssp.customized.class.php';
$table = 'bill';
$primaryKey = 'uid';
$joinQuery = "";
$extraWhere = "";
$groupBy = "";
$having = "";
$table_arr = array(
array(
'db' => 'bill.bill_datetime', 'dt' => 0, 'field' => 'bill_datetime',
'formatter' => function ($bill_datetime, $row) {
return $bill_datetime;
}
),
array(
'db' => 'expense.expense_id', 'dt' => 1, 'field' => 'expense_id',
'formatter' => function ($expense_id, $row) {
return $expense_id;
}
),
);
// เขียนคำสั่ง join ข้อมูล 2 ตาราง คือ bill และ exepense ไว้ที่ query หลัก
$joinQuery = "FROM bill AS bill JOIN expense AS expense ON (expense.expense_uid = bill_history.expense_uid)";
echo json_encode(
SSP::simple($this->input->post(), $sql_details, $table, $primaryKey, $table_arr, $joinQuery, $extraWhere, $groupBy, $having)
);
การ Filter ( กรองข้อมูล ) โดยใช้ extraWhere
กรณีที่เราต้องการกรองข้อมูลที่จะแสดงผลในตาราง เช่น การกำหนดวันเริ่มต้น วันสิ้นสุดของข้อมูล หรือการกำหนดประเภทของข้อมูล เราสามารถใช้ extraWhere เข้ามาช่วยได้
เริ่มต้นเลยในส่วนของ javascript ไฟล์ main.js ให้เพิ่มตัวแปร ajax post เข้าไปด้วย ตัวอย่างจะเขียนคำสั่งเพิ่มเข้าไปในโค๊ดต้นแบบได้ดังนี้
"ajax": {
"url": report_billsConfig.report_bills_url,
"type": "POST",
"data": function (post) {
post.expense_type = 1;
post.startDate = '2020-01-01';
post.stopDate = '2021-01-01';
post.length = 25;
}
},
ในฝั่ง server side ( bill.php ) เราจะเขียนรับตัวแปรและเพิ่ม extraWhere เข้าไป เพื่อทำการกรองข้อมูลประเภทของ expense และ วันเริ่มต้น สิ้นสุดของ bill ได้ดังนี้
$expensed_type = $_POST['expensed_type'];
$startDate = $_POST['startDate'];
$endDate = $_POST['endDate'];
// แสดงผลข้อมูลแบบกำหนดวันเริ่มต้น และสิ้นสุดของข้อมูลตาราง bill
$extraWhere .= 'DATE(bill.bill_datetime) >= "' . $startDate . '" AND DATE(bill.bill_datetime) <= "' . $endDate . '"';
// แสดงผลข้อมูลแบบกำหนดประเภทของข้อมูลตาราง expense
$extraWhere .= " AND expense.expensed_type = " . $expensed_type;
$joinQuery = "FROM bill AS bill JOIN expense AS expense ON (expense.expense_uid = bill.expense_uid)";
echo json_encode(
SSP::simple($this->input->post(), $sql_details, $table, $primaryKey, $table_arr, $joinQuery, $extraWhere, $groupBy, $having)
);
จากตัวอย่างโค๊ดการใช้งาน datatables ด้านบน เราสามารถเพิ่มการ join มากกว่า 1 ตาราง ด้วยการเขียนเพิ่มที่ส่วนของ joinQuery และ ถ้าต้องการเพิ่มการ filter ( กรองข้อมูล ) หลายเงื่อนไข ก็สามารถเพิ่มได้ในส่วนของ extraWhere
สำหรับการใช้งาน datatables ในการรับโหลดข้อมูลจำนวนมาก สามารถอ่านวิธีการใช้งานได้ที่ Datatables.js ใช้ Ajax โหลดข้อมูลทีละหน้าเกิน 10,000 Row