สวัสดีครับในวันนี้เราจะมาแนะนำการใข้งาน Data Tables ซึ่งเป็น plug-in สำหรับ จัดการการแสดงข้อมูลในรูปแบบตาราง ซึ่งใช้งานง่าย มาก ๆ ครับ
รายละเอียดเพิ่มเติม https://datatables.net/
มาติดตั้งแบบเริ่มต้นกันเลย
1.สร้างไฟล์ demo.html ดังนี้
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 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 |
<!DOCTYPE html> <html> <head> <title>Data Table</title> <!--นำเข้าไฟล์ Css --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/> <!--นำเข้าไฟล์ Jquery --> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <!--นำเข้าไฟล์ plug-in DataTable --> <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> <script> $(document).ready( function () { //คำสั่ง Javascript สำหรับเรียกใช้งาน Datatable $('#example').DataTable(); } ); </script> </head> <body> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</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> <tr> <td>Michael Silva</td> <td>Marketing Designer</td> <td>London</td> <td>66</td> <td>2012/11/27</td> <td>$198,500</td> </tr> <tr> <td>Paul Byrd</td> <td>Chief Financial Officer (CFO)</td> <td>New York</td> <td>64</td> <td>2010/06/09</td> <td>$725,000</td> </tr> <tr> <td>Gloria Little</td> <td>Systems Administrator</td> <td>New York</td> <td>59</td> <td>2009/04/10</td> <td>$237,500</td> </tr> <tr> <td>Bradley Greer</td> <td>Software Engineer</td> <td>London</td> <td>41</td> <td>2012/10/13</td> <td>$132,000</td> </tr> <tr> <td>Dai Rios</td> <td>Personnel Lead</td> <td>Edinburgh</td> <td>35</td> <td>2012/09/26</td> <td>$217,500</td> </tr> </tbody> </table> </body> </html> |
ตัวอย่างการทำงาน
DataTables จะทำการแบ่งหน้าให้อัตโนมัติ และ มีช่อง Search สามารถค้นหาข้อมูลได้ทันที แต่จากตัวอย่างนี้จะเป็นการแสดงข้อมูลแบบ Static ที่อยู่ใน Html จะเหมาะกับตารางที่ไม่ค่อยมีข้อมูลเปลี่ยนแปลง
การใช้งาน DataTables Server-side processing แสดง และ ค้นหาข้อมูลด้วย PHP/MySQL
สำหรับต้วอย่างต่อไปนี้ เราจะใช้ความสามารถ Server-side processing ของ DataTables ในการแสดง และ ค้นหาข้อมูลจาก ฐานข้อมูล MySQL ด้วย PHP ครับ
ใน MySQL สร้างฐานข้อมูล Database ชื่อ test และ สร้างตารางชื่อ 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 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 |
CREATE TABLE `datatable` ( `id` int(11) NOT NULL AUTO_INCREMENT, `first_name` varchar(50) CHARACTER SET utf8 DEFAULT NULL, `last_name` varchar(50) CHARACTER SET utf8 DEFAULT NULL, `email` varchar(50) CHARACTER SET utf8 DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=51 DEFAULT CHARSET=utf8; INSERT INTO `datatable` (`id`, `first_name`, `last_name`, `email`) VALUES (1, 'Wendi', 'Drackford', 'wdrackford0@hp.com'), (2, 'Ugo', 'Boundy', 'uboundy1@uol.com.br'), (3, 'Porter', 'Henryson', 'phenryson2@biblegateway.com'), (4, 'Karim', 'Koppens', 'kkoppens3@kickstarter.com'), (5, 'Nicko', 'Bamford', 'nbamford4@quantcast.com'), (6, 'Coop', 'Landrick', 'clandrick5@wired.com'), (7, 'Kessia', 'Clemson', 'kclemson6@answers.com'), (8, 'Shelley', 'Stanners', 'sstanners7@oakley.com'), (9, 'Collete', 'Whelpdale', 'cwhelpdale8@chronoengine.com'), (10, 'Arthur', 'Cowle', 'acowle9@gov.uk'), (11, 'Marty', 'MacCrosson', 'mmaccrossona@dedecms.com'), (12, 'Falkner', 'Chazotte', 'fchazotteb@upenn.edu'), (13, 'Nina', 'Cowx', 'ncowxc@soundcloud.com'), (14, 'Diane-marie', 'Keiley', 'dkeileyd@usnews.com'), (15, 'Antonie', 'Petrenko', 'apetrenkoe@craigslist.org'), (16, 'Elliott', 'Donnison', 'edonnisonf@accuweather.com'), (17, 'Rube', 'Farmiloe', 'rfarmiloeg@geocities.jp'), (18, 'Xavier', 'Earney', 'xearneyh@mail.ru'), (19, 'Goran', 'Swarbrigg', 'gswarbriggi@phoca.cz'), (20, 'Lavena', 'Repper', 'lrepperj@storify.com'), (21, 'Sheila', 'Crank', 'scrankk@adobe.com'), (22, 'Tillie', 'McGowran', 'tmcgowranl@wix.com'), (23, 'Kirbie', 'Colisbe', 'kcolisbem@xing.com'), (24, 'Kiley', 'Tinkham', 'ktinkhamn@opera.com'), (25, 'Alvin', 'Hammon', 'ahammono@twitter.com'), (26, 'Debora', 'Rodinger', 'drodingerp@ameblo.jp'), (27, 'Cyndie', 'Myrick', 'cmyrickq@go.com'), (28, 'Nichols', 'Baggarley', 'nbaggarleyr@hp.com'), (29, 'Ramona', 'Clow', 'rclows@shutterfly.com'), (30, 'Margaux', 'Golding', 'mgoldingt@google.cn'), (31, 'Juditha', 'Lemasney', 'jlemasneyu@tripod.com'), (32, 'Debora', 'Bonifazio', 'dbonifaziov@youtube.com'), (33, 'Jennee', 'Dearle', 'jdearlew@jalbum.net'), (34, 'Valentino', 'Thorouggood', 'vthorouggoodx@msn.com'), (35, 'Ferdy', 'Horwell', 'fhorwelly@fda.gov'), (36, 'Lodovico', 'Staniland', 'lstanilandz@foxnews.com'), (37, 'Eben', 'Olijve', 'eolijve10@mozilla.com'), (38, 'Gretta', 'Cullip', 'gcullip11@pagesperso-orange.fr'), (39, 'Tedra', 'Blockey', 'tblockey12@biblegateway.com'), (40, 'Carena', 'Bartlosz', 'cbartlosz13@independent.co.uk'), (41, 'Garwood', 'Chipchase', 'gchipchase14@nps.gov'), (42, 'Cybill', 'Klimkov', 'cklimkov15@oracle.com'), (43, 'Marieann', 'Kimmings', 'mkimmings16@plala.or.jp'), (44, 'Guglielmo', 'Alderton', 'galderton17@dailymotion.com'), (45, 'Chad', 'Altree', 'caltree18@statcounter.com'), (46, 'Tansy', 'Crumbleholme', 'tcrumbleholme19@constantcontact.com'), (47, 'Casey', 'Simison', 'csimison1a@quantcast.com'), (48, 'Hadley', 'Jaulme', 'hjaulme1b@about.me'), (49, 'Gearalt', 'Chaffin', 'gchaffin1c@drupal.org'), (50, 'Clim', 'Spary', 'cspary1d@bandcamp.com'); |
สร้างไฟล์ server_processing.php สำหรับประมวลผลข้อมูลจาก Server
โดยไฟล์นี้จะเป็นการรับข้อมูล เลขหน้าที่แสดง และ ข้อมูลการค้นหา จาก Datatable
จากนั้น PHP ส่งผลการค้นหาที่ได้ กลับไป แสดงผล ยัง 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 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 |
<?php if(isset($_POST['start'])){ $start = $_POST['start'];//รับข้อมูล เลขหน้าที่จะแสดง $length = $_POST['length']; //รับข้อมูล จำนวนที่แสดงต่อหน้า ค่าเริ่มต้นคือ 10 $searchData = $_POST['search']['value'];//รับข้อมูล ช่อง Search $servername = "localhost"; $username = "root"; $password = ""; $dbname = "test";//ชื่อฐานข้อมูล // Create connection $conn = mysqli_connect($servername, $username, $password, $dbname); // Check connection if (!$conn) { die("Connection failed: " . mysqli_connect_error()); } $searchValueResult = ""; $searchValueData = mysqli_real_escape_string($conn,$searchData); // Search value //Query กรณีมีการค้นหาข้อมูล if($searchValueData != ''){ $searchValueResult = " WHERE first_name LIKE '%".$searchValueData."%' OR last_name LIKE '%".$searchValueData."%' OR email LIKE '%".$searchValueData."%' "; } //Query นับจำนวนข้อมูลทั้งหมด $t = mysqli_query($conn,"SELECT COUNT(*) as total FROM datatable"); $records = mysqli_fetch_assoc($t); $totalRecords = $records['total']; //Query ข้อมูลที่จะแสดงใน DataTable $sql = "SELECT * FROM datatable $searchValueResult LIMIT $start , $length"; $result = mysqli_query($conn, $sql); $data = array(); if (mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)) { $data[] = array( 'first_name'=> $row['first_name'], 'last_name'=> $row['last_name'], 'email'=> $row['email'], ); } } mysqli_close($conn); $json_data = array( "draw" => intval( $_REQUEST['draw'] ), "recordsTotal" => intval($totalRecords ), "recordsFiltered" => intval($totalRecords), "data" => $data // total data array ); echo json_encode($json_data); } ?> |
สร้างไฟล์ index.php
โดยไฟล์นี้จะเป็นการแสดงข้อมูลที่ได้รับจากไฟล์ server_processing.php
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 |
<!DOCTYPE html> <html> <head> <title>Data Table</title> <!--นำเข้าไฟล์ Css --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/> <!--นำเข้าไฟล์ Jquery --> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <!--นำเข้าไฟล์ plug-in DataTable --> <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function() { //คำสั่ง Javascript สำหรับเรียกใช้งาน Datatable $('#example').DataTable( { "processing": true, "serverSide": true, 'serverMethod': 'post', "ajax": "server_processing.php", 'columns': [ { data: 'first_name' }, { data: 'last_name' }, { data: 'email' }, ] } ); } ); </script> </head> <body> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Email</th> </tr> </thead> </table> </body> </html> |
ตัวอย่างการทำงาน
เมื่อมีการเลือกเปลี่ยนหน้า หรือ ค้นหาข้อมูลในช่อง Search Datatable จะส่งข้อมูลไปยังไฟล์ server_processing.php เพื่อ Query ข้อมูลจาก Database และส่งข้อมูลกลับมาแสดงผลในตาราง Datatable