itOffside
การติดตั้งใช้งาน Datatables กับการดึงข้อมูลแบบ AJAX Server-side [PHP+MySQL]
Ajax![การติดตั้งใช้งาน Datatables กับการดึงข้อมูลแบบ AJAX Server-side [PHP+MySQL]](/storage/690/conversions/datatables-ajax-processing-05-20260920173308-md.webp)
DataTables เป็นส่วนเสริมของ jQuery (Javascript library) ซึ่ง Datatables เป็นเครื่องมือที่มีความหยืดหยุ่นในการใช้งาน ได้หลากหลายรูปแบบ โดย DataTables จะนำข้อมูลออกมาแสดงในรูปแบบของตาราง มีการเรียงลำดับตามคอลัมน์ มีการค้นหา และที่สำคัญสุดมีการจัดการในเรื่องของการแบ่งหน้าของตารางอีกด้วย และดึงข้อมูลแบบ AJAX โดยดึงข้อมูลที่ใช้จริงมาแสดง เช่น ดึงข้อมูลที่หน้า 5 จำนวน 10 แถว เป็นต้น โดยเพียงการเขียนโค๊ดเพียงไม่กี่บรรทัดเท่านั้นเอง
สำหรับ source code DataTables Plugin สามารถดาวน์โหลดได้ฟรี ครับ
ซึ่งเนื้อหาบทความนี้ จะสอนวิธีการติดตั้ง ตั้งแต่เริ่มต้นพร้อมคำอธิบาย รูปภาพประกอบกันไปเลยเพื่อให้ผู้อ่าน ได้มีความเข้าใจได้ง่ายขึ้น
ทดสอบการใช้งาน (DEMO) คลิกที่นี้เพื่อทดสอบ
เรามาเริ่มกันเลยดีกว่า วิธีการติดตั้งขั้นตอนแรกให้เราไปโหลด Sourcecode DataTables จากลิงค์ดาวน์โหลดจากเว็บหลักที่นี้ https://datatables.net/download/packages
หลักจากนั้นให้เราแตกไฟล์ Sourcecode ที่ได้โหลดมา แล้ว Copy โฟล์เดอร์ media มาทั้งหมดมาวางไว้ในภายในโปรเจคที่เราจะเรียกใช้งานนะครับ
ต่อจากนั้นโหลดไฟล์ฐานข้อมูลที่ชื่อ datatables.sql เพื่อใช้สำหรับเป็นข้อมูลทดสอบสำหรับบทความนี้นะครับ คลิกเพื่อดาวน์โหลด
ดาวน์โหลดไฟล์ ssp.class.php คลิกเพื่อดาวน์โหลด ไฟล์นี้คือชุดคำสั่งเรียกข้อมูลจาก mysql
ดาวน์โหลดมาแล้วให้ทำการ import ข้อมูลลงสู่ฐานข้อมูล วิธีการคือ
1. สร้างชื่อฐานข้อมูลในตัวอย่างบทความนี้ใช้ชื่อ datatables พอใส่ชื่อเสร็จกดปุ่ม Create ได้เลย
2. คลิกเลือกเมนู import ตรงเมนูบน
3. คลิกเลือกปุ่ม "เลือกไฟล์"แล้วเลือกไฟล์ฐานข้อมูลที่เราดาวน์โหลดมาเมื่อกี้ครับ (datatables.sql)
หลักจากที่เรา import ข้อมูลเสร็จแล้ว ขั้นตอนต่อไปเป็นการเรียกใช้งานนะครับ
การเรียกใช้งานจำเป็นต้องมีไฟล์ jquery นะครับ ถ้าหากไม่มี datatables จะไม่ทำงาน!
1. ให้ include ไฟล์ js -- jquery.dataTables.js และไฟล์ css -- jquery.dataTables.min.css ไว้บน <header>
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.min.css">
<script src="media/js/jquery.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>2. ในส่วนของเนื้อหาที่จะแสดงตารางข้อมูล ให้นำโค๊ดตัวอย่างด้านล่างนี้ใส่ไปครับ
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>3. เขียนคำสั่ง javascript ให้เรียกใช้งาน
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "server_processing.php"
} );
} );
</script>คำอธิบายของโค๊ดนี้คือ ดึงข้อมูลแบบ server-side โดยให้ไฟล์ server_processing.php ประมวลผลข้อมูลแล้วนำกลับมาใช้ที่หน้าตารางนี้ โดยโค๊ดของไฟล์ server_processing.php จะเรียกข้อมูลมาเฉพาะที่จะแสดงผลเท่านั้น เช่นดึงข้อมูลหน้า 5 และดึงมาเพียง 10 แถวเท่านั้น
ให้เราสร้างไฟล์ server_processing.php และนำโค๊ดด้านล่างนี้วาง แล้วกด Save ครับ
<?php
//ชื่อตาราง
$table = 'datatables_demo';
//ชื่อคีย์หลัก
$primaryKey = 'id';
//ข้อมูลอะเรที่ส่งป datables
$columns = array(
array( 'db' => 'first_name', 'dt' => 0 ),
array( 'db' => 'last_name', 'dt' => 1 ),
array( 'db' => 'position', 'dt' => 2 ),
array( 'db' => 'office', 'dt' => 3 ),
array(
'db' => 'start_date',
'dt' => 4,
'formatter' => function( $d, $row ) {
return date( 'jS M y', strtotime($d));
}
),
array(
'db' => 'salary',
'dt' => 5,
'formatter' => function( $d, $row ) {
return '$'.number_format($d);
}
)
);
//เชื่อต่อฐานข้อมูล
$sql_details = array(
'user' => 'root',
'pass' => '',
'db' => 'datatables',
'host' => 'localhost'
);
// เรียกใช้ไฟล์ spp.class.php
require( 'ssp.class.php' );
//ส่งข้อมูลกลับไปเป็น JSON โดยข้อมูลถูกดึงมาจากการเรียกใช้ class ssp
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);คำอธิบาย
เป็นไฟล์ที่ใช้ในการดึงข้อมูลจากฐานข้อมูลมาแล้วมาจัดรูปแบบข้อมูลให้อยู่ในแบบที่ต้องการ โดยจัดเป็นแบบ Array ส่วนไฟล์ที่เรียกใช้ฐานข้อมูลคือไฟล์ ssp.class.php
ในส่วนของรายละเอียดการเชื่อมต่อฐานข้อมูลตรงนี้ เราต้องใส่ให้ถูกต้องกับข้อมูล Server ของเราด้วยครับ
ลองดูผลลัพธ์ด้านล่าง
ต่อ... สำหรับใครต้องการผลรวมแต่ละหน้า สามารถทำได้โดยเขียน script javascript เพิ่มเติมใน
$('#example').DataTable( {ตามโค๊ดด้านล่างนี้นะครับ
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 5 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 5, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 5 ).footer() ).html(
'$'+pageTotal +' total'
);
}จบแล้วสำหรับบทความนี้
สำหรับ Source code ตัวอย่าง แบบเต็มสามารถดาวน์โหลดได้ที่ https://github.com/ipball/ex_datatables/archive/master.zip
หรือ Clone Git https://github.com/ipball/ex_datatables
ทางผู้เขียนคงคิดว่าน่าจะมีประโยชน์สำหรับคนที่เข้ามาอ่านไม่มากก็น้อย แต่ก็ดีใจครับ ที่ยังมี ฮ่าๆ หากมีข้อสงสัยตรงไหน คอมเม้นไว้ด้านล่างเลยครับ...ขอบคุณครับ
แชร์บทความนี้
โปรแกรมเมอร์
ความเห็น (19)