Visibly hide a column but keep data in DOM

BluePanda

Hi DataTables,

Wondering if you could help me out with this scenario. I've recently upgraded to DataTables 2, and I'm wanting to visibly hide columns, while maintaining their data within the DOM. This is something we did with DataTables 1, but the same settings aren't working for DataTables 2.

See the below example of what happens:

From the DOM it looks like DataTables is still reserving space for these columns, despite them being set to {display: none } via CSS, or initialisation options.

When using Columns.visibility() functions it removes the data from the table. This causes errors when this table is submitted as part of the form and the data is required.

Any help would be appreciated.

<table class="table table-bordered table-datatables table-sm table-striped w-100 dataTable" id="recruit/recommend-list" data-url="/" style="width: 1256px;">
  <colgroup>
    <col data-dt-column="0" style="width: 0px;">
    <col data-dt-column="1" style="width: 0px;">
    <col data-dt-column="2" style="width: 392.283px;">
    <col data-dt-column="3" style="width: 863.717px;">
  </colgroup>
    <thead class="table-dark">
      <tr role="row" tabindex="0">
        <th class="hidden dt-orderable-none" data-dt-column="0" rowspan="1" colspan="1">
        <span class="dt-column-title">U Fieldlist</span>
        <span class="dt-column-order"></span>
    </th>
    <th class="hidden dt-orderable-none" data-dt-column="1" rowspan="1" colspan="1">
        <span class="dt-column-title">U Version</span><span class="dt-column-order"></span>
    </th>
    <th class="text dt-orderable-none" data-dt-column="2" rowspan="1" colspan="1">
         <span class="dt-column-title">Name</span><span class="dt-column-order"></span>
    </th>
    <th class="select dt-orderable-none" data-dt-column="3" rowspan="1" colspan="1">
         <span class="dt-column-title">Interview Attendance</span>
         <span class="dt-column-order"></span>
     </th>
      </tr>
    </thead>
      <tbody>
          <tr id="simple-id" data-allowdetail="false" data-url="" tabindex="0">
              <td class="hidden d-none" data-th="U Fieldlist">                  
                    <input id="U_FIELDLIST" name="U_FIELDLIST-data" type="hidden" value="" data-initial-value="">
              </td>
              <td class="hidden d-none" data-th="U Version">
                    <input id="U_VERSION" name="U_VERSION-data" type="hidden" value="&quot;" data-initial-value="&quot;"></td>
              <td class="text " data-th="Name">Ashley Holzberger</td>
              <td class="select " data-th="Interview Attendance">
                       <select id="INTERVIEW_ATTENDANCE" name="INTERVIEW_ATTENDANCE-data" class="options " data-initial-value="C">
                              <option value="P">Pending</option>
                              <option value="C" selected="">Completed - request assessment</option>
                              <option value="W">Did not attend - withdraw application</option>
                       </select>
              </td>
          </tr>
       </tbody>
  <tfoot></tfoot>
</table>

BluePanda

Found my answer.

For posterity, the autoWidth option was set to true. Thereby causing it to create widths for hidden columns. I fixed my issue by setting autoWidth to false.

This allowed the columns to be hidden but still have access to the data.

allan

Another option is to use Responsive with the never or none special class name. But, in general this is not something that DataTables core was designed for a developer using it to do.

Allan