CODEWITHSUNDEEP
jquerybootstrap-table
gene b.
gene b.

Reputation: 12034

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

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.

Upvotes: 4

Views: 12335

Answers (4)

Diego Gandino
Diego Gandino

Reputation: 111

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

Upvotes: 1

Breezer
Breezer

Reputation: 10490

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/

Upvotes: 8

Phiter
Phiter

Reputation: 14982

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

Upvotes: 1

Sensoray
Sensoray

Reputation: 2430

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

Upvotes: 0

Related Questions