Q:

Hiding a Datatables column on page load then using a checkbox to show or hide it

Sorry if this is a dumb question but here's what i need to do. When the page loads, I have a DT column that needs to be hidden. I have a checkbox on the page will either show or hide the column depending on whether the checkbox is checked. Is there a way to do this with a combination of jquery and the datatables methods? I tried something where I hide the column on page load with jquery but when you toggle the checkbox and reload the page, it doesn't work right (probably due to the table and how it's getting redrawn).  Code below.
 if (!userAccountsDTO) { 
    userAccountsDTO = $adminUserAccountsTable.DataTable({
      destroy:true,
      data:normalizedData,
      columns:userAccountsMap,
      autoWidth:false,
      paging:false,
      dom:'lftip',
       2 = user name, 0 = invisible child indicator sort
       orderFixed: {
       post: [[2,'desc'],[0, 'desc']]
      },
      order:[4,'asc'],
      language:{
        search:'',
        searchPlaceholder:ax.L(5008),
        emptyTable: ax.L(905),
        zeroRecords: ax.L(905),
        info: tableFilters.info,
        infoFiltered: tableFilters.infoFiltered,
        infoEmpty: tableFilters.info
      },
      rowCallback:function(row, data, index) {
        var $row = $(row);
        var uname = data.username.replace(/[@._#]/gi,'-');
        var id = data.id;
        $row.data('username',uname);
        $row.data('id',id);
        if (!data.enabled) {
          $row.addClass('row-disabled');
        }
        if (data.current_profile.id != data.default_profile.id) {
          $row.addClass('childrow un-'+id);
        } else {
          $row.addClass('parentrow un-'+id);
        } 
      }
    });

    ax.Utils.setupTableFiltering($adminUserAccountsTable, userAccountsDTO, MAX_RESULTS, { visibleOnly: true });
     var $profileColumnHidden = $adminUserAccountsTable.find('.admin-user-accounts-profile-column').hide();

  } else {
    userAccountsDTO.clear();
    userAccountsDTO.search('');        
    userAccountsDTO.rows.add(normalizedData);
    userAccountsDTO.draw();
  }   

 //Checkbox

 $adminUserAccountsShowHideProfiles.change(function(e) {
  var $profileChildRows = $adminUserAccountsTable.find('tr.childrow');
  var $profileColumn = $adminUserAccountsTable.find('.admin-user-accounts-profile-column');
  if ( $(this).is(':checked') ) { 
    $profileChildRows.show();
    $profileColumn.show(); 
  } else  { 
    $profileChildRows.hide();
    $profileColumn.hide(); 
  }
 });

A:

create a css class for hiding particular column.
table.hide_col tr > td:nth-child(1){
  display:none
}
table.hide_col tr > th:nth-child(1){
  display:none
}

add/remove class on checkbox click event
 $('table').addClass('hide_col')
  $('#chkShow').on('click', function(){
   $('table').toggleClass('hide_col')
  });

http://jsfiddle.net/ercanpeker/0kpmjd1u/ 

