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 ดังนี้
|
1 2 3 4 5 6 7 8 9 10 |
<!-- นำเข้า 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="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script> |
2.กำหนด id ให้กับ Html Table ที่ต้องการ ตัวอย่าง กำหนดให้ id คือ example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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
|
1 2 3 4 |
$(function(){ //กำหนดให้ Plug-in dataTable ทำงาน ใน ตาราง Html ที่มี id เท่ากับ example $('#example').dataTable(); }); |
4.ตัวอย่าง Code การเรียกใช้งานทั้งหมด
|
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 |
<!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="http://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 แทน ซึ่งจะแนะนำในบทความต่อไปครับ ***
|
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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<?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="http://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 ข้อมูล
|
1 2 3 4 5 6 7 |
<tr class="info"> <th>#</th> <th>first name</th> <th>last name</th> <th>email</th> <th class='no-sort'>gender</th><-- ปิดการ sort --> </tr> |
|
1 2 3 4 5 6 7 |
$('#example').dataTable( { "order": [], "columnDefs": [ { "targets" : 'no-sort', "orderable": false, }] }); |
การ ปิด ช่อง ค้นหาข้อมูล Search
|
1 2 3 |
$('#example').dataTable( { "bFilter": false } ); |
การ ปิด การ แสดงตัวเลือก Show entries
|
1 |
$(".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 ฐานข้อมูลแล้วครับ