DataTables คือ plug-in Jquery Javascript สำหรับ จัดการข้อมูล Html Table ซึ่ง การใช้งานนั้น ง่าย มาก ๆ เพียงแค่ นำเข้า Script ก็สามารถใช้งานได้ทันที โดยจะมีการจัดรูปแบบข้อมูล ใน Table ของเรา ให้สามารถ ค้นหา(Search) , เรียงลำดับ(Sort) , แบ่งหน้า (Pagination) ให้อัตโนมัติ ซึ่งถือได้ว่าสุดยอด มาก ๆ และ ยังสามารถ ปรับแต่ง Options ต่าง ๆ ได้อีกด้วย มาดูตัวอย่างการเลยดีกว่า
ดูตัวอย่าง เพิ่มเติม ที่ Web Site ของ ผู้พัฒนา https://datatables.net/examples/basic_init/zero_configuration.html
เริ่มต้นการใช้งาน DataTables ดังนี้
1.นำเข้า Javascript และ CSS ดังนี้
<!-- นำเข้า CSS จาก Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- นำเข้า CSS จาก dataTables --> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.css"> <!-- นำเข้า Javascript จาก Jquery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <!-- นำเข้า Javascript จาก dataTables --> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
2.กำหนด id ให้กับ Html Table ที่ต้องการ ตัวอย่าง กำหนดให้ id คือ example
<table class="table table-bordered" id="example">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
</tr>
</tbody>
** หมายเหตุ ใน Html Table อย่าลืม กำหนด แท็ก thead และ tbody ให้กับ Table ด้วย หากไม่กำหนด ตัว dataTables จะไม่ทำงาน **
3.คำสั่ง Jquery เรียกใช้งาน dataTables ให้ทำงาน กับตางราง ที่มี id เท่ากับ example
$(function(){
//กำหนดให้ Plug-in dataTable ทำงาน ใน ตาราง Html ที่มี id เท่ากับ example
$('#example').dataTable();
});
4.ตัวอย่าง Code การเรียกใช้งานทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Tables</title>
<!-- นำเข้า CSS จาก Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- นำเข้า CSS จาก dataTables -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<!-- นำเข้า Javascript จาก Jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- นำเข้า Javascript จาก dataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script type="text/javascript">
//คำสั่ง Jquery เริ่มทำงาน เมื่อ โหลดหน้า Page เสร็จ
$(function(){
//กำหนดให้ Plug-in dataTable ทำงาน ใน ตาราง Html ที่มี id เท่ากับ example
$('#example').dataTable();
});
</script>
</head>
<body>
<h1>Data Tables </h1>
<table class="table table-bordered" id="example">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$115,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
</tbody>
</table>
</body>
</html>
การประยุกต์ใช้งาน กับ PHP และ ฐานข้อมูล MySQL
ตัวอย่าง Source Code ดังนี้ Download
*** หมายเหตุ ในตัวอย่างการใช้งานนั้นจะเป็นการใช้ PHP โหลดข้อมูล จาก Server มาทั้งหมด แล้ว ตัว DataTable ค่อยมาทำการแบ่ง หน้าทีหลัง เพราะฉะนั้นจึงไม่เหมาะกับข้อมูลที่มีปริมาณมาก ๆ ซึ่งเราจะต้องมีการปรับปรุง การเรียกข้อมูลโดยใช้ Ajax แทน ซึ่งจะแนะนำในบทความต่อไปครับ ***
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "customer";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Tables</title>
<!-- นำเข้า CSS จาก Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- นำเข้า CSS จาก dataTables -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<!-- นำเข้า Javascript จาก Jquery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- นำเข้า Javascript จาก dataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script type="text/javascript">
//คำสั่ง Jquery เริ่มทำงาน เมื่อ โหลดหน้า Page เสร็จ
$(function(){
//กำหนดให้ Plug-in dataTable ทำงาน ใน ตาราง Html ที่มี id เท่ากับ example
$('#example').dataTable();
});
</script>
</head>
<body>
<h1>Data Tables </h1>
<table class="table table-bordered" id="example">
<thead>
<tr class="info">
<th>#</th>
<th>first name</th>
<th>last name</th>
<th>email</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM customer";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["id"]. "</td>";
echo "<td>" . $row["first_name"]. "</td>";
echo "<td>" . $row["last_name"]. "</td>";
echo "<td>" . $row["email"]. "</td>";
echo "<td>" . $row["gender"]. "</td>";
echo "</tr>";
}
}
$conn->close();
?>
</tbody>
</table>
</body>
</html>
การปรับแต่ง options ของ dataTables
การ ปิด การทำงาน ของปุ่ม sort
การใช้งาน กำหนด class ชื่อว่า no-sort ให้กับ Column ที่ต้องการปิดการ Sort ข้อมูล
<tr class="info"> <th>#</th> <th>first name</th> <th>last name</th> <th>email</th> <th class='no-sort'>gender</th><-- ปิดการ sort --> </tr>
$('#example').dataTable( {
"order": [],
"columnDefs": [ {
"targets" : 'no-sort',
"orderable": false,
}]
});
การ ปิด ช่อง ค้นหาข้อมูล Search
$('#example').dataTable( {
"bFilter": false
} );
การ ปิด การ แสดงตัวเลือก Show entries
$(".dataTables_length").hide();
สามารถดูตัวอย่าง การใช้งานเพิ่มเติมได้ที่ https://datatables.net/
ยอดเยี่ยม ขอบคุณที่แบ่งปัน
จะปรับจำนวนที่ list ที่เลือกให้แสดงกี่เรคคอร์ด ปรับตรงไหนคะ รบกวนด้วยค้า
ลองปรับเพิ่มในส่วนของ lengthMenu ประมาณนี้ครับ
$(document).ready(function() {
$(‘#example’).DataTable( {
“lengthMenu”: [[10, 25, 50, -1], [10, 25, 50, “All”]]
} );
} );
ขอบคุณนะคะ ได้แล้วค่พ แต่ข้อมูลในตารางที่ดึงมาจากฐาน ไม่ยอมอ่านภาษาไทย T T
ขอถามอีกอย่างนะคะ ค้นหา ค้นได้แต่ภาษาอังกฤษ หรอคะ ภาษาไทยมันไม่ค้นให้อ่าค่ะ
ค้นหาได้ทั้ง 2 ภาษาครับ
อาจเป็น เพราะ query แล้วไม่เป็น ภาษาไทย ลอง set chartset ให้เป็น utf8 ครับ
ในส่วนของ php
ลองเพิ่ม
mysqli_set_charset($conn,”utf8″);
หลังจาก connect ฐานข้อมูลแล้วครับ