bootstrap 表格插件bootstrap-table的js設置高度及高度自適應

用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>

個人我的網站-前端之攻略

若有疑問請關注公衆號：**前端之攻略，**我會詳細解答，此公衆號我也會按期更新前端有關知識