title: Hide specific columns in jQuery Datatable according to some condition on response data
body: <p>I have below code in which I want to hide certain columns on the basis of city data. 
  I have used a callback function but it disrupts the table. 
  Also it gives error if I change something in it. </p>
  
  <pre><code>var hide_col = $('#table_id').dataTable().api();
  var table = $('#table_id');
  var oTable = table.dataTable({
      "destroy": true,
      "processing": true,
      "serverSide": true,
      "ajax": "/app/get-data/"+val1+'/'+val2+'/'+val3+'/',
      "searching": false,
      "ordering": true,
      "paging": true,
      "columnDefs": [
          {"targets": 1, "orderable": false},{"targets": 2, "orderable": false},
          {"targets": 3, "orderable": false},{"targets": 4, "orderable": false},
          {"targets": 5, "orderable": false},{"targets": 6, "orderable": false},
          {"targets": 7, "orderable": false},{"targets": 8, "orderable": false},
          {"targets": 9, "orderable": false},{"targets": 10, "orderable": false},
          {"targets": 11, "orderable": false},{"targets": 12, "orderable": false},
          {"targets": 13, "orderable": false},{"targets": 14, "orderable": false},
          {"targets": 15, "orderable": false},{"targets": 16, "orderable": false},
          {"targets": 17, "orderable": false},{"targets": 18, "orderable": false},
          {"targets": 19, "orderable": false},{"targets": 20, "orderable": false},
          {"targets": 21, "orderable": false},{"targets": 22, "orderable": false},
          {"targets": 23, "orderable": false},{"targets": 24, "orderable": false},
  
          {"width": "200%", className: "dt-left", "targets": 0}
      ],
  
      buttons: [{ extend: 'print',
           className: 'btn dark btn-outline' },
          { extend: 'copy',
            className: 'btn red btn-outline' },
          { extend:'pdf',
            orientation:'landscape',
            className: 'btn green btn-outline',
            exportOptions: {
              columns: [0,1,2,3,4,5,6,7,8,9,10,11,12] }},
          { extend: 'excel',
            className: 'btn yellow btn-outline' },
          { extend: 'csv',
            className: 'btn purple btn-outline' },
          { extend: 'colvis',
            className: 'btn dark btn-outline',
            text: 'Columns' }
      ],
      // setup responsive extension: http://datatables.net/extensions/responsive/
      responsive: false,
  
      "order": [
          [0, 'asc']
      ],
  
      "lengthMenu": [
          [10, 20, 50, 100],
          [10, 20, 50, 100]  // change per page values here] // change per page values here
      ],
      // set the initial value
      "pageLength": 10,
  
      "initComplete": function(settings, json) {            
          if (settings.jqXHR.responseJSON.city == 'A'){
              hide_col.columns([6,7,8,12,16,17,18,19,20]).visible(false);
              hide_col.columns([9,10,11,13,14,15,21,22,23,24]).visible(true);
          }
          else if (settings.jqXHR.responseJSON.city == 'B'){
              hide_col.columns([9,10,11,13,14,15,21,22,23,24]).visible(false);
              hide_col.columns([6,7,8,12,16,17,18,19,20]).visible(true);
          }
      }
  });
  </code></pre>
  
  <p>I am using one callback too but seems I am doing something wrong. Please help. Thank you.</p>