bootstraptable通过数据属性或javascript以表格格式显示数据
Posted Micheal_L
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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: ‘策略名称‘
}, {
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> " +
" <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"
},]
})
以上是关于bootstraptable通过数据属性或javascript以表格格式显示数据的主要内容,如果未能解决你的问题,请参考以下文章
bootstrap table 表格太宽,设置的width属性不起作用怎么办
bootstrap table 表格太宽,设置的width属性不起作用怎么办