เว็บนี้เลยครับ ทำให้ตารางแบบเรียบง่าย มาจัดรูปแบบด้วย 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 |
|---|---|---|---|---|
| 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 |
โค้ดทั้งหมด
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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> |
