datatables ปรับตารางให้สวย และมีลูกเล่น
21 March 2014 By 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>
Tags::
datatables
อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ
URL สำหรับอ้างอิง
Top
Copy