bootstraptable使用
时间: 2023-08-31 20:12:39 浏览: 57
Bootstrap Table是一个基于Bootstrap框架的jQuery表格插件,可以快速地将HTML表格转换为功能丰富的交互式表格。它支持搜索、排序、分页、导出等功能,并且可以自定义样式和事件。
使用Bootstrap Table很简单,只需要引入相关的文件和代码即可。以下是一个简单的例子:
1. 引入相关文件
```html
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
```
2. 编写HTML表格
```html
<table id="myTable" data-toggle="table" data-url="data.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
```
3. 编写JavaScript代码
```javascript
$(function() {
$('#myTable').bootstrapTable();
});
```
在上面的代码中,我们通过将`data-toggle`设置为`table`来启用Bootstrap Table插件,将数据源设置为`data.json`,并定义了表格的列。
最后,我们在JavaScript中调用`bootstrapTable()`方法来初始化表格。现在我们就可以使用Bootstrap Table插件了,可以通过鼠标点击、拖动等方式对表格进行交互操作。