bootstraptable通过数据属性或javascript以表格格式显⽰数据bootstraptable通过数据属性或javascript以表格格式显⽰数据
通过数据属性(把数据写死)
<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>
我们还可以通过data-url="data1.json"在普通表上设置来使⽤远程URL数据。
<table
data-toggle="table"
data-url="data1.json">
<thead>
<tr>
<th data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
我们还可以添加pagination，search和sorting表格，如下表所⽰。
<table
data-toggle="table"
data-url="data1.json"
data-pagination="true"
data-search="true">
<thead>
<tr>
<th data-sortable="true" data-field="id">Item ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
通过JavaScript
通过JavaScript调⽤带有id表的bootstrap Table。
<table id="table">
</table>
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
})
我们还可以通过设置来使⽤远程URL数据url: 'data1.json'。
$('#table').bootstrapTable({
url: 'data1.json',
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
})
还可以添加pagination，search和sorting表格，如下表所⽰。
$('#table').bootstrapTable({
url: 'data1.json',
pagination: true,
search: true,
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}]
})
//项⽬中的代码如下
/*
有思路：将下⾯渲染table的语句写在websocket函数内，只要触发该函数，就进⾏刷新渲染，实现实时刷新。
*/
$("#UploadTable").bootstrapTable('destroy').bootstrapTable({
// 策略列表table
columns: [{
field: 'StgID',
title: '策略ID'
}, {
field: 'uStgName',
title: '策略名称'
bootstrap项目
}, {
field: 'uUpTime',
title: '指定服务器'
}, {
field: 'uServer',
title: '运⾏状态',
}, {
field: 'uoption',
title: '操作',
formatter: function (value, row, index) {
return "<span onclick=\"modify('" + value + "')\" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_backtest_detail'> <i class='fa fa-pencil'></i>启动</                            " <span onclick=\"del_('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-pencil'></i>停⽌</span>" +
" <span onclick=\"del_('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-pencil'></i>⼈⼯录⼊</span>";
}
},
{
field: 'fkong',
title: '风控',
}],
data: [{
StgID: 1,
uStgName: "test1",
uUpTime: "服务器1",
uServer: "运⾏中",
uoption: 1,
fkong: "fk1"
},]
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。