datatables ปรับตารางให้สวย และมีลูกเล่น
เขียนเมื่อ 6 ปีก่อน โดย Ninenik Narkdeedatatables
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ datatables
ไปที่
Copy
โค้ดทั้งหมด
เว็บนี้เลยครับ ทำให้ตารางแบบเรียบง่าย มาจัดรูปแบบด้วย jquery plugin
ทำอะไรได้บ้าง โหลดมาใช้กันได้เลยครับ
แนะนำให้โหลดไฟล์มา เพราะด้านในมีคู่มือ พร้อมตัวอย่าง มือใหม่
เรียนรู้จากตรงนั้นได้
เอาตัวอย่าง แบบไม่ต้องโหลดไฟล์ ที่ใช้ CDN จาก microsoft
โค้ดด้านล่างใช้ theme จาก jqueryui ดึง CDN จาก google
https://developers.google.com/speed/libraries/devguide#jquery-ui
ตัวอย่าง
https://developers.google.com/speed/libraries/devguide#jquery-ui
ตัวอย่าง
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
---|---|---|---|---|
Trident | Internet Explorer 4.0 | Win 95+ | 4 | X |
Trident | Internet Explorer 5.0 | Win 95+ | 5 | C |
Trident | Internet Explorer 5.5 | Win 95+ | 5.5 | A |
Trident | Internet Explorer 6 | Win 98+ | 6 | A |
Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
โค้ดทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> </title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" /> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/blitzer/jquery-ui.css" /> <link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css" /> </head> <body> <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <tbody> <tr> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center"> 4</td> <td class="center">X</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td class="center">5.5</td> <td class="center">A</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 6</td> <td>Win 98+</td> <td class="center">6</td> <td class="center">A</td> </tr> </tbody> <tfoot> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </tfoot> </table> <script type="text/javascript"> $(document).ready(function(){ // $('#example').dataTable(); oTable = $('#example').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers" }); }); </script> </body> </html>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

Tags::
datatables
URL สำหรับอ้างอิง
Top
Copy
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ