我有下表,我使用Bootstrap-table
<div class="row mystyle" >
<div class="col-md-12">
<table id="mytable" data-row-style="rowStyle" class="table table-hover" id="table-pagination "
data-url="labels.json"
data-toggle="table"
data-pagination="true"
data-show-pagination-switch="true"
data-sort-order="desc"
data-search="true"
data-show-refresh="true"
data-show-columns="true"
data-page-list="[10, 25, 50, 100, ALL]"
>
<thead>
<tr>
<th data-field="customer.name" data-align="center" data-sortable="true">customer</th>
<th data-field="type" data-align="center" data-sortable="true">type</th>
<th data-field="description" data-align="center" data-sortable="true">description</th>
<th data-field="cutter" data-align="center" data-sortable="true">cutter</th>
<th data-field="valid_s" data-align="center" data-sortable="true">valid</th>
</tr>
</thead>
</table>
</div>
</div>
有没有办法定义在启动时隐藏哪些列?例如,我想只显示customer
和description
列。
你可以使用data-visible =“false”,它很容易。
<thead>
<tr>
<th data-field="customer.name" data-align="center" data-sortable="true">customer</th>
<th data-field="type" data-align="center" data-sortable="true" data-visible="false">type</th>
<th data-field="description" data-align="center" data-sortable="true">description</th>
<th data-field="cutter" data-align="center" data-sortable="true" data-visible="false">cutter</th>
<th data-field="valid_s" data-align="center" data-sortable="true" data-visible="false">valid</th>
</tr>
</thead>
你可以在你的js中使用ready函数中的hideColumn
来做到这一点:
$(function(){
var $table = $('#mytable');
$table.bootstrapTable('hideColumn', 'type');
$table.bootstrapTable('hideColumn', 'cutter');
$table.bootstrapTable('hideColumn', 'valid_s');
});
然后,如果你想展示它们,你可以使用:
$(function(){
var $table = $('#mytable');
$table.bootstrapTable('showColumn', 'type');
$table.bootstrapTable('showColumn', 'cutter');
$table.bootstrapTable('showColumn', 'valid_s');
});
希望这可以帮助。
上面的答案都没有对我有用,因为他们从DOM中删除了列 - 但我必须将它保留在DOM中。我只想隐藏专栏。
以下解决方案用于保持列隐藏但在DOM中:
Bootstrap-Table: How to hide a column without deleting it from the DOM?
恩。在TH上使用data-class
属性,然后将其定义为隐藏:
<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>
.hidden{
display:none;
visibility:hidden;
}
或者另一种选择是在Bootstrap-Table的onPostBody()
之后在jQuery中手动隐藏TD / TH。
您需要添加最后一行
<table id="mytable" data-row-style="rowStyle" class="table table-hover" id="table-pagination "
data-url="labels.json"
data-toggle="table"
data-pagination="true"
data-show-pagination-switch="true"
data-sort-order="desc"
data-search="true"
data-show-refresh="true"
data-show-columns="true"
data-page-list="[10, 25, 50, 100, ALL]"
showPaginationSwitch="false"
>