Hide columns in bootstrap table at startup
You can use 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>
You could do that in your javascript using hideColumn
inside the ready function:
$(function(){
var $table = $('#mytable');
$table.bootstrapTable('hideColumn', 'type');
$table.bootstrapTable('hideColumn', 'cutter');
$table.bootstrapTable('hideColumn', 'valid_s');
});
Then if you want to show them you could use:
$(function(){
var $table = $('#mytable');
$table.bootstrapTable('showColumn', 'type');
$table.bootstrapTable('showColumn', 'cutter');
$table.bootstrapTable('showColumn', 'valid_s');
});
None of the answers above worked for me, because they deleted the column from the DOM -- but I had to keep it in the DOM. I only wanted to hide the column.
The following solutions worked to keep the column hidden but in the DOM:
Bootstrap-Table: How to hide a column without deleting it from the DOM?
ex. using the data-class
attribute on the TH, and then defining it to be hidden:
<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>
.hidden{
display:none;
visibility:hidden;
}
Or another option is to hide the TD/TH manually in jQuery after Bootstrap-Table's onPostBody()
.
You need to add the last line
<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"
>