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>
|
1 2 3 |
<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. ในส่วนของเนื้อหาที่จะแสดงตารางข้อมูล ให้นำโค๊ดตัวอย่างด้านล่างนี้ใส่ไปครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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 ให้เรียกใช้งาน
|
1 2 3 4 5 6 7 8 9 |
<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 ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?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 เพิ่มเติมใน
|
1 |
$('#example').DataTable( { |
ตามโค๊ดด้านล่างนี้นะครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
"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
ทางผู้เขียนคงคิดว่าน่าจะมีประโยชน์สำหรับคนที่เข้ามาอ่านไม่มากก็น้อย แต่ก็ดีใจครับ ที่ยังมี ฮ่าๆ หากมีข้อสงสัยตรงไหน คอมเม้นไว้ด้านล่างเลยครับ…ขอบคุณครับ
อยากให้นำออกจากฐานข้อมูลเป็นภาษาไทยได้มัยค่ะ พอดีน้องเอาออกมาเป็นภาาาเอเลียน ต้องทำยังไงค่ะ
ตอนแสดงเป็นภาษาไทย ใช่ไหมครับ ลองดูในส่วนของ encoding html นะครับ
สอบถามครับ datatable นี้สามารถค้นหาชื่อเป็นภาษาไทยได้หรือเปล่า ครับ
ได้ครับ
ขอบคุณสำหรับความรู้ครับ
เพิ่มเงื่อนไข where ยังไงครับ
ผมติดปัญหาเรื่อง ค่าเริ่มต้นไม่มีข้อมูล จะต้องประกาศตัวแปรหรือกำหนดอย่างไรครับ
ขอคำแนะนำหน่อยครับ
อย่างไรนะครับ ไม่มีข้อมูล ผมเอาไฟล์ sql แนบไปกับบทความแล้วครับ
เราจะเปลี่ยนปุ่มค้นหาให้เป็นภาษาไทยต้องทําอย่างไร
โหลดตัวภาษาไทยมา ใส่ได้เลยครับ https://datatables.net/plug-ins/i18n/Thai
ใส่ไหนครับ TT
ทำยังไงเหรอครับ ขอแบบละเอียดได้ไหมครับ ผมเพิ่งเริ่มเขียนเว็ป
โหลดไฟล์ datatables-th.lang มานะครับ แล้วเขียนสคริปแบบนี้
$(document).ready(function() {
$(‘#example’).DataTable( {
“processing”: true,
“serverSide”: true,
“ajax”: “server_processing.php”,
“language”: {
“url”: “js/datatables-th.lang”
},
} );
} );
สามารถใช้ Query ของเราได้ไหมครับ สามารถใส่ได้ตรงไหน
ไฟล์ ssp.class.php ไปดาวโหลดได้จากที่ใหนครับ
โหลดจากตรงนี้ครับ ทั้งโปรเจค(ตัวอย่าง)
https://github.com/ipball/ex_datatables
เราสามารถเพิ่มปุ่ม Edit เพื่อเรียกใช้ modal ได้ไหมครับ
เพิ่มได้ครับ
เพิ่มยังไงครับ ผมนั่ง งง ไม่รู้จะเพิ่มตรงไหน