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

Answer 1

I solved this problem putting class d-none of bootstrap in headdings and cels of columns that I want to hide but dont disappear from DOM

Answer 2

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 3

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;
}

Answer 4

Make that column have width:0; overflow:hidden; This will hide the column and still have it be in the DOM.