โดย Parichat » 09/01/2018 12:32 am
DataTables สามารถทำงานร่วมกับ
Bootstrap 3(บูตสแตบ 3) ได้อย่างราบรื่นโดยใช้ตัวเลือกการจัดวางตารางของ Bootstrap เพื่อนำเสนออินเทอร์เฟซด้วยการออกแบบที่เหมือนกันโดยใช้ Bootstrap(บูตสแตบ) สำหรับไซต์ / แอปของเรา การรวมบูตชุดข้อมูลของ DataTables จะมีตัวแสดงผลสำหรับการควบคุมการแบ่งหน้าใน DataTables(ดาต้าเทเบล) เพื่อให้แน่ใจว่าการจัดเรียงหน้าของตารางมีความสม่ำเสมอด้วย Bootstrap(บูตสแตบ)
ตัวอย่างการทำ DataTables(ดาต้าเทเบล)
โค้ด Javascript(จาวาสคริปต์)
โค้ด: เลือกทั้งหมด
$(document).ready(function() {
$('#example').DataTable();
} );
เข้าไปลิ้งนี้ได้
https://cdn.datatables.net/1.10.16/js/j ... les.min.js
https://cdn.datatables.net/1.10.16/js/d ... rap.min.js
โค้ด HTML(เอชทีเอ็มเเอล)
โค้ด: เลือกทั้งหมด
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>รหัสปัจจัย</th>
<th>ชื่อปัจจัย</th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>รหัสปัจจัย</th>
<th>ชื่อปัจจัย</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Trauma<td>
<td><a class="btn btn-info" href="#" role="button">Edit</a><td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a><td>
</tr>
<tr>
<td>2</td>
<td>ยาบางชนิด</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>3</td>
<td>Stress</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>4</td>
<td>ดื่มแอลกอฮอล์</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>5</td>
<td>Infection</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>6</td>
<td>การพักผ่อน</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>7</td>
<td>ฮอร์โมน</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>8</td>
<td>อื่นๆ ระบุ</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
<tr>
</tbody>
</table>
CSS(ซีเอสเอส)
เข้าไปในลิ้งนี้-->
https://cdn.datatables.net/1.10.16/css/ ... ap.min.css
ศึกษาบทเรียน css เพิ่มเติมได้ที่นี่
ปูพื้นความรู้เรื่อง css
อ้างอิง :
https://datatables.net/examples/styling/bootstrap.html
[b][size=150][color=#FF0080]DataTables[/color][/size][/b] สามารถทำงานร่วมกับ [url=https://www.mindphp.com/forums/viewforum.php?f=76]Bootstrap 3(บูตสแตบ 3)[/url] ได้อย่างราบรื่นโดยใช้ตัวเลือกการจัดวางตารางของ Bootstrap เพื่อนำเสนออินเทอร์เฟซด้วยการออกแบบที่เหมือนกันโดยใช้ Bootstrap(บูตสแตบ) สำหรับไซต์ / แอปของเรา การรวมบูตชุดข้อมูลของ DataTables จะมีตัวแสดงผลสำหรับการควบคุมการแบ่งหน้าใน DataTables(ดาต้าเทเบล) เพื่อให้แน่ใจว่าการจัดเรียงหน้าของตารางมีความสม่ำเสมอด้วย Bootstrap(บูตสแตบ)
[b][color=#FF00BF]ตัวอย่างการทำ DataTables(ดาต้าเทเบล)[/color][/b]
[attachment=0]table.JPG[/attachment]
[b]โค้ด Javascript(จาวาสคริปต์)[/b]
[code]$(document).ready(function() {
$('#example').DataTable();
} );[/code]
เข้าไปลิ้งนี้ได้ [url]https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js[/url]
[url]https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js[/url]
[b]โค้ด HTML(เอชทีเอ็มเเอล)[/b]
[code]<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>รหัสปัจจัย</th>
<th>ชื่อปัจจัย</th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>รหัสปัจจัย</th>
<th>ชื่อปัจจัย</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Trauma<td>
<td><a class="btn btn-info" href="#" role="button">Edit</a><td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a><td>
</tr>
<tr>
<td>2</td>
<td>ยาบางชนิด</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>3</td>
<td>Stress</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>4</td>
<td>ดื่มแอลกอฮอล์</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>5</td>
<td>Infection</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>6</td>
<td>การพักผ่อน</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>7</td>
<td>ฮอร์โมน</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
</tr>
<tr>
<td>8</td>
<td>อื่นๆ ระบุ</td>
<td><a class="btn btn-info" href="#" role="button">Edit</a></td>
<td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
<tr>
</tbody>
</table>[/code]
[b]CSS(ซีเอสเอส) [/b]
เข้าไปในลิ้งนี้-->[url]https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css[/url]
ศึกษาบทเรียน css เพิ่มเติมได้ที่นี่ [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]ปูพื้นความรู้เรื่อง css[/url]
อ้างอิง : [url]https://datatables.net/examples/styling/bootstrap.html[/url]