Answers

• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  February 2020

  The columnDefs.targets docs list all of the options you can use:

  0 or a positive integer - column index counting from the left
  A negative integer - column index counting from the right
  A string - class name will be matched on the TH for the column (without a leading .)
  The string "_all" - all columns (i.e. assign a default)

  You can use a class name that you can assign using columns.className.

  Kevin
• soulbriski Posts: 21Questions: 7Answers: 0

  February 2020

  Thanks Kevin, I appreciate your response.

  The solution I was looking for was the columns.className method you identified but I can't get it to work.

  For a fuller picture, I am using stateSaveCallback and stateLoadCallback to/from MySQL and using features such as colReorder etc.

  The searchPanes are drawn in my own bootstrap4 modal or sidebar (user preference) at intComplete using tbl.searchPanes.container().appendTo('#myContainer');

  If I could make the testcase display the searchPanes I could show you the working code

  Thanks in advance for any further tips
• soulbriski Posts: 21Questions: 7Answers: 0

  February 2020

  FYI @kthorngren

  I've got a working (or not) test case now at http://live.datatables.net/kupizova/1/edit

  Please note that targets: ['nopane'] is the line of code which is being ignored.

  if you change it to targets: [4] then it works as you would expect.

  I need to refer to the className and not the ordinal position of the column because my users can use colReorder
• soulbriski Posts: 21Questions: 7Answers: 0

  February 2020

  Having experminted further, I've now managed to answer my own question and have a solution to share.

  If, like me you are presenting a large number of tables to the system's users then dynamics are very important.

  In my case, it's important that the panes are shown/hidden based on the column object and not the column's ordinal position because the user can move columns using colReorder and as such the usual columnDefs approach wouldn't work because we don't know the position of the column once it has been moved and we are difining it's visibility before we initialize the dataTable.

  This test case demonstrates column manipulation to achieve the showing/hiding of specific panes outside the rules set by the default threashold for uniqueness.

  In the test case, I have hard-coded the column info but in my real project the column info is generated on the fly by the PHP code which returns the data for the table from MySQL as per this example PHP code:-

  $data['ajax'] = json_encode(CrmModel::getCRMsList());
  
  $data['table_id'] = 'crm';
  
  // By this stage we have already retrieved our data from MySQL and have json_encode it. The following column assignment matches the data structure we have
  
  $sp_obj = new stdClass();
          
  $sp_obj->show = false;
  
  $data['columns'] = json_encode(array(                                                                       array('data' => 'ord_pos', 'name' => 'ord_pos', 'title' => '#', 'className' => 'reorder'),
              array('data' => 'crm_name', 'name' => 'crm_name', 'title' => 'Company Name'),
              array('data' => 'crm_internal_id', 'name' => 'crm_internal_id', 'title' => 'Internal ID'),
              array('data' => 'crm_type_name', 'name' => 'crm_type_name', 'title' => 'Type'),
              array('data' => 'crm_telephone', 'name' => 'crm_telephone', 'title' => 'Telephone','searchPanes' => $sp_obj),
              array('data' => 'crm_email', 'name' => 'crm_email', 'title' => 'Email','searchPanes' => $sp_obj),
              array('data' => 'status', 'name' => 'status', 'title' => 'Status'),
          ));
  
  

  Our js for the datatable is echoed in php so that we can use all our dynamics. It goes something like this (Only an excerpt, not everything shown)

  $out = "
  var tbl = $('#" . $data['table_id'] . "' ).DataTable( {
  fixedHeader: true,
  responsive: true,
  stateSave: true,
  data: " . $data['ajax'] . ",
  columns: " . $data['columns'] . ",
  searchPanes: {
   // Config here
  },
  // rest of dataTable initilization here for stateSaveCallback, stateLoadCallback etc
  });"
  
  echo $out;
  
  
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  February 2020

  Well, I guess using columns.className isn't applied early enough for columnDefs.targets to use. You will need to apply them before. I assigned the class directly in the th.
  http://live.datatables.net/kupizova/2/edit

  Kevin
• soulbriski Posts: 21Questions: 7Answers: 0

  February 2020

  Thanks for your help Kevin. I can see from your example that assigning the class directly in the th is also a way to acheive the same goal.