用js控制bootstrapTable的高度有幾種方法
方法一:
<table class="table-striped qiliangqifei-tab" id="qiliangqifei">
<thead>
<tr>
<th data-valign="middle" >氣費年月</th>
<th>當期氣量 </br > Sm<sup>3</sup></th>
<th>當期氣費 </br >(元)</th>
</tr>
</thead>
<tbody>
<tr>
<td>2016-12</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>2016-10</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready( function (){
$( '#qiliangqifei' ).bootstrapTable( { height: 260 } );
});
</script>
方法二:
<table class="table-striped " data-toggle="table" data-height="350" id="qiliangqifei">
<thead>
<tr>
<th data-valign="middle" >氣費年月</th>
<th>當期氣量 </br > Sm<sup>3</sup></th>
<th>當期氣費 </br >(元)</th>
</tr>
</thead>
<tbody>
<tr>
<td>2016-12</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>2016-10</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$('#qiliangqifei').bootstrapTable({height:$(window).height()-120});
</script>
兩者的差別是table元素中第二種方法是含有data-toggle="table" 及data-height="350",js調用時不要寫
$(document).ready(回調函數)
方法三:
<table class="table-striped " data-toggle="table" data-height="350" id="qiliangqifei">
<thead>
<tr>
<th data-valign="middle" >氣費年月</th>
<th>當期氣量 </br > Sm<sup>3</sup></th>
<th>當期氣費 </br >(元)</th>
</tr>
</thead>
<tbody>
<tr>
<td>2016-12</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>2016-10</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready( function (){
$( '#qiliangqifei' ).bootstrapTable('resetView',{ height: 260 } );
});
</script>
如果有$(document).ready(回調函數),需要加上"resetView" 否則不起作用
如果我們根據table裡面的内容來确定container的高度,當内容的高度大于視窗的高度就有滾動條,當内容的高度小于視窗的高度,container的高度設定為内容的高度
完整的js如下:
$(document).ready( function (){
//設定bootstrapTable起始的高度
$('#tableTest1').bootstrapTable({height:$(window).height()-120});
//當表格内容的高度小于外面容器的高度,容器的高度設定為内容的高度,相反時容器設定為視窗的高度-160
if($(".fixed-table-body table").height()<$(".fixed-table-container").height()){
$(".fixed-table-container").css({"padding-bottom":"0px",height:$(".fixed-table-body table").height()+20});
// 是當内容少時,使用搜尋功能高度保持不變
$('#tableTest1').bootstrapTable('resetView',{height:"auto"});
}else{
$(".fixed-table-container").css({height:$(window).height()-160});
}
});
</script>