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.

Stonemason

why do you assume its deleted from the dom? – Oat

I check in Chrome Dev Tools (F12) and the column doesn't exist at all. Only N-1 columns exist. Both TD and TH – Stonemason

either some code is removing it, because hiding it does just that and nothing else, or something is faulty with your debugging – Oat

are you familiar with Bootstrap-Table or are you just talking randomly? I am not hiding anything, Bootstrap-Table is responsible for outputting all my columns. – Stonemason

Guys... it really removes it from the DOM: jsfiddle.net/pj3rpnxu – Paediatrician

randomly generally... here we go again with randomly, then the library is probably saving the content inside a object or something similiar, either retrieve the desired data or use a diffrent function to hide the data bootstrap-table.wenzhixin.net.cn/documentation – Oat

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/

Oat

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

Paediatrician

but why did you have the CSS? When I remove your CSS for nth-child(1), it stops working. In theory I should be able to just .hide() without the CSS definitions, right? But the hide() alone doesn't work. – Stonemason

My bad, I forgot the CSS there and didn't see that it was the one making it work. – Paediatrician

I have updated my answer now with the correct selector! – Paediatrician

Weird, my onPostBody never fires and I never get to my alert messages. But I see that your Fiddle works. Thanks. will confirm shortly. – Stonemason

wouldn't recommend this solution will be problematic if you change column to hide, you'll have to change css everytime accordingly – Oat

Answer 3

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

Fluorene

Answer 4

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

Malita

Nope -- that shows the column. Here, I've updated Phiter's JSFiddle to show how even putting a style on it doesn't work: jsfiddle.net/pj3rpnxu/7 (version 7) With your CSS, it will output the 'Stars' column. – Stonemason

@geneb. That's because you only put it on the header column. It's not applied to the cells inside the tbody. You have to apply it to those as well. So: .tr td:nth-child(1), tr th:nth-child(1){ width:0; overflow:hidden;} – Malita

But Bootstrap-Table doesn't give me control over TD's, only TABLE/TH. The rest is output internally by the plugin. – Stonemason