Bootstrap-table showAllColumns method

Question

I have a button to show all columns of the bootstrap table. When I click it doesn't works.

Code:

    <table data-toggle="table">
        <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="id" >ID</th>
            <th data-field="name">Name</th>
        </tr>
        </thead>
    </table>
    <button id="show_all">Show All columns</button>
    <button id="hide_all">Hide All columns</button>

<script>    

    $('#show_all').on('click', function(){
        $('table').bootstrapTable('showAllColumns');
    })

    $('#hide_all').on('click', function(){
        $('table').bootstrapTable('hideAllColumn');
    })

</script>

See the example:

https://jsfiddle.net/ruzD/5b2vsdgy/

Answer 1

Here is a working solution.

$('#show_all').on('click', function(){
    $('table th').show();
})

$('#hide_all').on('click', function(){
    $('table th').hide();
})