Bootstrap EP.15 การใช้งาน data table ร่วมกับ Dreamweaver + php + database
Bootstrap EP.15 การใช้งาน data table ร่วมกับ Dreamweaver + php + database
ในตอนที่ 15 นี้จะสอนการใช้งาน data table มีประโยชน์ต่อเว็บไซต์ของเรามาก
เช่น การเรียงลำดับ การค้นหาข้อมูลในตาราง ทั้งหมดนี้จะทำได้ง่ายขึ้นโดยใช้
data table ซึ่งไม่ยากอย่างที่คิด คลิ๊กดูคลิปวีดีโอได้เลย
โค๊ดที่ต้องใช้ วางก่อนปิด </head>
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function() { $('#example').DataTable( { "aaSorting" :[[0,'desc']], }); } ); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<table border="0" align="center" cellspacing="1" class="display" id="example"> <!--ส่วนหัว--> <thead> <tr> <th align="center">id</th> <th align="center">name</th> <th align="center">city</th> <th align="center">img</th> <th align="center">date</th> <th align="center">edit</th> <th align="center">del</th> </tr> </thead> |
