套件說明
- 官網：https://bootstrap-table.com/docs/getting-started/introduction/
GitHub：https://github.com/wenzhixin/bootstrap-table
範例：https://examples.bootstrap-table.com/
參數：https://bootstrap-table.com/docs/api/table-options/ - 注意不要設定「 data-height='400'」，否則標題與內容無法對齊
- 使用(CDN)：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
-
通过 data 属性的方式
<table data-toggle="table"> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table>
无需编写 JavaScript 启用 bootstrap table，我们对普通的 table 设置 data-toggle="table" 即可。
我们也可以通过设置远程的 url 如 data-url="data1.json" 来加载数据。 -