title: Bootstrap-Table: How to hide a column without deleting it from the DOM?
body: <p>I'm having problems with the Bootstrap-Table plugin:
  <a href="https://github.com/wenzhixin/bootstrap-table" rel="nofollow noreferrer">https://github.com/wenzhixin/bootstrap-table</a></p>
  
  <p>I have a hidden ID column in the table I need to hide. But I can't do</p>
  
  <pre><code>&lt;th data-field="id" data-visible="false"&gt;ID&lt;/th&gt; 
  </code></pre>
  
  <p>because that deletes it from the DOM. I need to <strong>keep the ID in the DOM</strong>, since it's used in form submission. It just needs to be hidden.</p>
  
  <p>This doesn't work either, my style is lost and the column doesn't exist:</p>
  
  <pre><code>&lt;th data-field="id" style="display:none;&gt;ID&lt;/th&gt;
  </code></pre>
  
  <p>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!</p>
  
  <pre><code>&lt;table id="delegateTable"  data-toggle="table" data-url="delegates.action"
   data-response-handler="delegatesResponseHandler"&gt;
     &lt;thead&gt;
          &lt;tr&gt;
             &lt;th data-field="id"&gt;ID&lt;/th&gt;
             &lt;th data-field="delegate" style="width:10%"&gt;Delegate&lt;/th&gt;
     &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>jQuery Doc OnReady:</p>
  
  <pre><code>$(document).ready(function() {
  
      // Hide column
      $('#delegateTable').bootstrapTable({
          onPostBody : function() {
              $('#delegateTable td:nth-child(0), th:nth-child(0)').hide();
              alert('column hidden');                 
          }
      });
  </code></pre>
  
  <p>It never even gets to that onPostBody.</p>