bootstrap 的table可不可以动态加载表头
时间: 2023-08-04 21:04:32 浏览: 92
是的,Bootstrap的Table可以动态加载表头。您可以使用JavaScript或jQuery来动态创建表头,然后使用Bootstrap的Table插件来渲染表格。以下是一个简单的示例:
HTML代码:
```html
<table id="myTable"></table>
```
JavaScript代码:
```javascript
var columns = [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: 'Name'
}, {
field: 'age',
title: 'Age'
}];
// 动态创建表头
var headers = '<thead><tr>';
for (var i = 0; i < columns.length; i++) {
headers += '<th data-field="' + columns[i].field + '">' + columns[i].title + '</th>';
}
headers += '</tr></thead>';
// 设置表格的HTML内容
$('#myTable').html(headers);
// 加载数据
$('#myTable').bootstrapTable({
data: [{
id: 1,
name: 'John',
age: 30
}, {
id: 2,
name: 'Mary',
age: 25
}]
});
```
在这个示例中,我们首先定义了一个包含列信息的数组,然后使用JavaScript动态创建了表头。最后,我们使用Bootstrap的Table插件来渲染表格,并将数据加载到表格中。
阅读全文