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.

I check in Chrome Dev Tools (F12) and the column doesn't exist at all. Only N-1 columns exist. Both TD and TH — gene b., Mar 12 '18 at 20:50
either some code is removing it, because hiding it does just that and nothing else, or something is faulty with your debugging — Breezer, Mar 12 '18 at 20:52
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. — gene b., Mar 12 '18 at 20:53
Guys... it really removes it from the DOM: https://jsfiddle.net/pj3rpnxu/ — Phiter, Mar 12 '18 at 20:54
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 http://bootstrap-table.wenzhixin.net.cn/documentation/ — Breezer, Mar 12 '18 at 21:07

score 8 · Accepted Answer · answered Mar 12 '18 at 21:10

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/

Phiter · Answer 2 · 2018-03-12T21:06:54.863

1

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

edited Mar 12 '18 at 21:06

answered Mar 12 '18 at 21:03

Phiter

14,570
14
50
84

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. – gene b. Mar 12 '18 at 21:05
My bad, I forgot the CSS there and didn't see that it was the one making it work. – Phiter Mar 12 '18 at 21:06
I have updated my answer now with the correct selector! – Phiter Mar 12 '18 at 21:07
Weird, my onPostBody never fires and I never get to my alert messages. But I see that your Fiddle works. Thanks. will confirm shortly. – gene b. Mar 12 '18 at 21:11
wouldn't recommend this solution will be problematic if you change column to hide, you'll have to change css everytime accordingly – Breezer Mar 12 '18 at 21:22

score 1 · Answer 3 · answered Oct 20 '20 at 21:26

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

answered Oct 20 '20 at 21:26

Diego Gandino

81
1
1

score 0 · Answer 4 · answered Mar 12 '18 at 20:58

0

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

answered Mar 12 '18 at 20:58

Sensoray

2,360
2
18
27

Nope -- that shows the column. Here, I've updated Phiter's JSFiddle to show how even putting a style on it doesn't work: https://jsfiddle.net/pj3rpnxu/7/ (version **7**) With your CSS, it will output the 'Stars' column. – gene b. Mar 12 '18 at 21:00
@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;}` – Sensoray Mar 12 '18 at 21:08
But Bootstrap-Table doesn't give me control over TD's, only TABLE/TH. The rest is output internally by the plugin. – gene b. Mar 12 '18 at 21:10

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

4 Answers4

Linked