如何使用bootstraptable将{id: 1, name: '111', phone: '111', company: '111', message: '111',}放入表格中
时间: 2023-09-24 07:03:03 浏览: 61
bootstrap表格应用
可以按照以下步骤使用Bootstrap Table将数据放入表格中:
1. 在HTML文件中引入Bootstrap Table的CSS和JS文件:
```html
<link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.css">
<script src="https://cdn.staticfile.org/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
```
2. 在HTML文件中创建一个表格的容器:
```html
<table id="myTable"></table>
```
3. 在JS文件中定义数据:
```javascript
var data = [
{id: 1, name: '111', phone: '111', company: '111', message: '111'},
// 其他数据
];
```
4. 在JS文件中初始化表格并将数据加载到表格中:
```javascript
$(function() {
$('#myTable').bootstrapTable({
data: data,
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '姓名'
}, {
field: 'phone',
title: '电话'
}, {
field: 'company',
title: '公司'
}, {
field: 'message',
title: '留言'
}]
});
});
```
这样就可以将数据加载到Bootstrap Table中的表格中了。注意,要先引入jQuery库。另外,可以根据实际情况修改columns中的字段和标题。
阅读全文