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

Question

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

I have a hidden column id in a table that I need to hide. But I can not do

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

because it removes it from the DOM. I need to save the identifier in the DOM , as it is used in the form view. It just needs to be hidden.

This does not work either, my style is lost and the column does not exist:

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

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

<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 gets into this onPostBody.

Answer 1

:

,

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

, , css

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

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

Answer 2

, , jQuery .

Css :nth-child 0;)

:

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

.

javascript CSS:

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

Answer 3

width:0; overflow:hidden; DOM.