【前端H5】bootstrap-table表格外掛使用js設定高度及高度自適應
阿新 • • 發佈：2019-01-06
用js控制bootstrapTable的高度有幾種方法
方法二：
$(document).ready(回撥函式)
如果有$(document).ready(回撥函式)，需要加上"resetView" 否則不起作用
如果我們根據table裡面的內容來確定container的高度，當內容的高度大於視窗的高度就有滾動條，當內容的高度小於視窗的高度，container的高度設定為內容的高度
完整的js如下：
方法一：
<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元素中第二種方法是含有data-toggle="table" 及data-height="350",js呼叫時不要寫<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>
$(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>