|
มาเข้าใจ และใช้ Datatable ดึงข้อมูลแบบ Server-side ด้วย PHP, MySQL กันเถอะ |
มาเข้าใจ และใช้ Datatable ดึงข้อมูลแบบ Server-side ด้วย PHP, MySQL กันเถอะ มีช่วงหนึงผมเคยนำ datatable มาพัฒนาในงานแต่เกิดปัญหาเนื่องจากมีข้อมูลขนาดใหญ่ ทำให้เกิดการโหลดในครั้งแรกที่โหลดหน้าเพจนั้นๆ เนื่องจากผมใช้ Ajax ในการโหลดข้อมูลทั้งหมดมาในครั้งเดียวด้วยจำนวนข้อมูล 1000 ขึ้น ซึ่งตอนนั้นผมคิดว่าการทำ preload น่าจะช่วยได้ แต่ว่าถ้า user เกิดเผลอไปกด refesh หรือแก้ไขข้อมูลเวลากลับมาที่หน้าข้อมูลก็ต้องโหลดใหม่อีก ทำให้ผมเลิกใช้ datatable ไปเลย เพราะคิดว่ามันคงไม่เหมาะ
แต่ในความจริงแล้ว datatable ก็ได้มีสิ่งที่มาแก้ในจุดนั้นได้ ซึ่งเรียกว่า server-side โดยการที่อนุญาตให้เรา query ข้อมูลออกมาก่อนแล้วส่งมาให้ datatable อ่านข้อมูลในจำนวนที่น้อยลง หลักการก็เหมือนๆ กับบทความการทำสร้าง XML จากข้อมูลขนาดใหญ่นั่นแหละครับ แต่มีเงื่อนไขเพียงแต่ว่า ต้อง Filter และส่งข้อมูลออกมาในรูปแบบที่ตรงตามหลักของ datatable เท่านั้น ( บางครั้งเวลาเข้าไปอ่าน Document หรือดู Example จะงงๆ ว่าอะไรเยอะแยะ ) โดยวันนี้จะมาแนะนำการใช้งานแบบง่ายๆ กันเลย :D
Code (PHP)
<table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
<thead>
<tr>
<th>Employee name</th>
<th>Salary</th>
<th>Age</th>
</tr>
</thead>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var datatableAjax = $('#employee-grid').dataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url" : "ajax.php",
"type" : "POST"
},
});
});
</script>
Code (PHP)
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "test";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
$requestData= $_REQUEST;
$columns = array(
0 =>'employee_name',
1 => 'employee_salary',
2=> 'employee_age'
);
$sql = "SELECT employee_name, employee_salary, employee_age ";
$sql.=" FROM employee";
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData;
$sql = "SELECT employee_name, employee_salary, employee_age ";
$sql.=" FROM employee WHERE 1=1";
if( !empty($requestData['search']['value']) ) { // if there is a search parameter, $requestData['search']['value'] contains search parameter
$sql.=" AND ( employee_name LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR employee_salary LIKE '".$requestData['search']['value']."%' ";
$sql.=" OR employee_age LIKE '".$requestData['search']['value']."%' )";
}
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$totalFiltered = mysqli_num_rows($query);
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." ";
$query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees");
$data = array();
while( $row=mysqli_fetch_array($query) ) { // preparing an array
$nestedData=array();
$nestedData[] = $row["employee_name"];
$nestedData[] = $row["employee_salary"];
$nestedData[] = $row["employee_age"];
$data[] = $nestedData;
}
$json_data = array(
"draw" => intval( $requestData['draw'] ),
"recordsTotal" => intval( $totalData ), // total number of records
"recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
"data" => $data // total data array
);
echo json_encode($json_data); // send data as json format
ลักการทำงานสำคัญจริงๆ ก็เหมือนการรับส่งข้อมูลในรูปแบบ Ajax ทั่วๆ ไป เพียงแต่ว่าตอนที่เราส่งกลับไปหา Datatables นั้น เราต้องส่งไปในรูปแบบที่อ่านได้ หรือตรงตามเงื่อนไขของมัน ซึ่งสามารถอ่านคู่มือได้จากเว็บไซต์ของ Datatables ว่ามี options อะไรอีกบ้าง?
ครั้งแรกๆ เวลาที่เราไปหาอ่านจากคู่มือเลย บางคนอาจจะหลงเข้าใจว่าต้องโหลดไฟล์ ssp.class.php ด้วยมั้ย ตอบเลยว่าไม่จำเป็นครับ แต่สามารถดูแล้วเอามาใช้งานได้ จริงๆ เอามาใช้เลยก็ได้สำหรับโปรเจ็คแบบ Pure PHP เพราะจะมี query ข้อมูลมาให้ครบ แต่หากต้องการเอาไป integrated กับ Framework อื่นๆ แน่นอนครับ ว่าเราต้องเข้าใจมันก่อน ถึงจะเอาไปปรับใช้ได้อย่างเข้าใจ
Reference : http://codingremember.blogspot.com/2015/08/datatable-server-side-php-mysql.html
|
|
|
By : |
ALTELMA
|
|
Article : |
บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ |
|
Score Rating : |
|
|
Create Date : |
2015-08-05 |
|
Download : |
No files |
|
Sponsored Links |
|
|
|
|
|
|