Hide columns in bootstrap table at startup

Question

I have the following table, where I use 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>

Is there a way to define which columns will be hidden at startup? For example, I want to show only customer and description column.

Answer 1

You could do that in your js 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');
});

Hope this helps.