Bootstrap-Table: How to hide a column without deleting it from the DOM?

Question

I'm having problems with the Bootstrap-Table plugin: https://github.com/wenzhixin/bootstrap-table

I have a hidden ID column in the table I need to hide. But I can't do

<th data-field="id" data-visible="false">ID</th> 

because that deletes it from the DOM. I need to keep the ID in the DOM, since it's used in form submission. It just needs to be hidden.

This doesn't work either, my style is lost and the column doesn't exist:

<th data-field="id" style="display:none;>ID</th>

I can't even use jQuery to hide the column manually! In other words, I tried the following after onPostBody, and it never fired either!

<table id="delegateTable"  data-toggle="table" data-url="delegates.action"
 data-response-handler="delegatesResponseHandler">
   <thead>
        <tr>
           <th data-field="id">ID</th>
           <th data-field="delegate" style="width:10%">Delegate</th>
   </thead>
</table>

jQuery Doc OnReady:

$(document).ready(function() {

    // Hide column
    $('#delegateTable').bootstrapTable({
        onPostBody : function() {
            $('#delegateTable td:nth-child(0), th:nth-child(0)').hide();
            alert('column hidden');                 
        }
    });

It never even gets to that onPostBody.

Answer 1

Best option would be

to change the data field to add the class

<th class="col-xs-1" data-class='hidden' data-field="stargazers_count">Stars</th>

and of course css for the hidden class

.hidden{
  display:none;
  visibility:hidden;
}

https://jsfiddle.net/yhtgfawj/7/

Answer 2

You almost got it right, the problem is that your jQuery selector is wrong.

Css's :nth-child doesn't start at 0 ;)

This will work:

$('#delegateTable').bootstrapTable({
    onPostBody : function() {
        $('#delegateTable').find('th:nth-child(1), tr td:nth-child(1)').hide();
        alert('column hidden');                 
    }
});

See this example.

You can also replace this javascript with CSS:

#delegateTable th:nth-child(1), #delegateTable tr td:nth-child(1){
  display: none;
}