Trying to hide child row button for rows without child data

pmconsulting

I have a datatable with id #cirm_table which loads its data via AJAX. Each #cirm_table row has a CatalogID in the second row like 'CW10010', 'CW10011', etc.

I also have a 2nd array containing additional information, called ext_data. It stores additional information for some of the items in the table. It is keyed by CatalogID and the information is in HTML format. This array is available and fully populated before I initialize my datatable. It looks like

[
   { 
      'CW10010' : '<table><tr><td>Gender:</td><td>Male</td>....'
   },
   { 
      'CW10230' : '<table><tr><td>Gender:</td><td>Female</td>....'
   },
   ...
]

There there are not one of these 2nd array items for every #cirm_table row, only some of them.

I am already successfully displaying the data from the 2nd array in the datatable using child rows. I am trying to only show child row buttons on rows that have additional data in the 2nd array. This code does not work:

var cirm_table = jQuery('#cirm_samples').DataTable({
                "ajax": {
                    url: "https://cellulardynamics.com/dev/assets/data_all.txt",
                    dataSrc: ""
                },
                "columns": [{
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    {
                        "data": "CatalogID"
                    },
                    {
                        "data": "Description"
                    },
                    {
                        "data": "AffectedStatus"
                    },
                    {
                        "data": "Age"
                    },
                    {
                        "data": "Sex"
                    },
                    {
                        "data": "Race"
                    },
                    {
                        "data": "Ethnicity"
                    },
                    {
                        "data": "Product"
                    },
                    {
                        "data": "ProductTypeID"
                    },
                    {
                        "data": "Source"
                    }
                ],
              columnDefs: [ {
                    targets: 0,
                    createdCell: function (td, cellData, rowData, row, col) {
                        if ( ext_data[rowData.CatalogID] != 'undefined' ) {
                            $(td).css( 'details-control' );
                        }
                    }
              } ]
            });

If I log the values of ext_data[rowData.CatalogID], they are correct but the createdCell function is failing to add the css of 'details-control', which I am assuming will create the buttons to show and hide the child row data for the rows that have data.

If I add the CSS ' details-control' to the 'columns: option, it adds a child row button to every row. That button correctly opens the rows that have child data, but throws an error for rows that do not.

What am I doing wrong?

stol

Instead of .css(), use $(td).addClass('details-control');
This worked for me.

allan

Thanks for posting back - that looks like it will do the job nicely.

Allan