datatable.destroy() and reinitialisation not working properly

joannaz

This is the end result of another post I've described over the past few days in the forums.

I have a webpage that is made up of a main table (Table 1), and a number of other tables that are populated with data based on what the user clicks in Table 1. One of these tables (let's call it Table 6 - #tblMFA in the DOM) only has data for a some selections in Table 1. The column titles in Table 6 will be different for every dataset that is not null.

All tables are initialised with DataTables.

The webpage with the error can be viewed at https://prognosticsdl.ecm.uwa.edu.au/pdl/.
'Pump2_Cavitation_RawAccData' (let's call it record 2) is the only option that has data for Table 6, which is visible in the Multi-file Parameters tab.

This table is the only one with problems because it is the only one I need to destroy and reinitialise.
The php code that extracts the data for Table 6 creates the following structure when there is no data:
{ "data": [] }. Otherwise the data is returned as an associative array.

All is ok when I initialise the table for the first time (with no data).

After I select record2 to populate Table 6, the data is rendered, but only the first column title.
After I deselect record2, (to empty Table 6 of data), the data remains and the console.log reports the following error:
"Cannot read property 'mData' of undefined"

Then when I select another record (that should also have no data) the data for record2 remains in table6 and the console.log reports the following errors:

Cannot read property 'parentNode' of null

My js routines :

$(document).ready(function () {
        
    !function OnRowClick() {
        
        $('#tblDSResults').on('click', 'tr', function () {
            
            var downloadBtn = $("#downloadBtn");
            downloadBtn.hide();
            
            var id = GetTableRowID();
            
            var table1 = $('#tblFileMetaData').DataTable();
            var table2 = $('#tblEquipMetaData').DataTable();
            var table3 = $('#tblColumnInfo').DataTable();       
            var table4 = $('#tblEquipParameters').DataTable();
            var table5 = $('#tblDatasetDetails').DataTable();       
            var table6 = $('#tblMFA').DataTable();
            
            if (Boolean(id) == false)
                id = 0;
            
            table1.ajax.url(siteURL + '/?action=populate_file_info_table&dsid=' + id).load();
            table2.ajax.url(siteURL + '/?action=populate_source_metadata_table&dsid=' + id).load();
            table3.ajax.url(siteURL + '/?action=populate_column_info_table&dsid=' + id).load();
            table4.ajax.url(siteURL + '/?action=populate_equip_parameters_table&dsid=' + id).load();
            table5.ajax.url(siteURL + '/?action=populate_dataset_details_table&dsid=' + id).load();
            
            table6.destroy();
            
            getMFData(id);

    
        });
    }();

   function GetTableRowID() {
        var table = $('#tblDSResults').DataTable();
        var id = table.cell(table.row('.selected'), 4).data();
        if (Boolean(id) == false)
            {
                id = 0;
            };
        console.log("dsid=" + id);
        return id;
}

    function getMFData(dsid) {
        var columns = [];
        
        //setup table for all of the details for Multi-file datasets
    
        $.ajax({
          url: siteURL + '/?action=populate_fileattributes_table&dsid=' + dsid,
          dataType: 'json',
          success: function (data){
            var data = data.data;
            console.log("rows of data =" + data.length);
            
            if (data.length === 0) { //an empty recordset
                columns = [null];
                data=[];
                } else {                                    
                    var columnNames = Object.keys(data[0]);
                    for (var i in columnNames) {
                        columns[i]={
                            title: columnNames[i],
                            data: columnNames[i]
                        };
                        
                    }
                }
            console.log(siteURL + '/?action=populate_fileattributes_table&dsid=' + dsid);   
            console.log(data);
            console.log(columns);
            
            $('#tblMFA').DataTable({
                data:data,
                columns:columns,
                language: {
                    lengthMenu: "",
                    zeroRecords: "No data available"
                        },
                paging:true,
                scrollX:true,
                scrossY:true,
                searching: false,
                autoWidth: false,
                ordering: false /*,
                drawCallback: function ( ) {
                    $.fn.dataTable.tables({visible: true, api: true}).columns.adjust();
                    }   */
                }) ;    
                    
            },
            error: function(){
                console.log("problem here");
                }
        });
    };

         
      
   !function  GetFileAttributes() {
        var dsid = GetTableRowID();
        if (Boolean(dsid) == false)
        {
            dsid = 0;
        }
        ;  //if no row is selected, set dsid to 0.  

        console.log("Getting multi file attributes");
        //setup table for all of the details for Multi-file datasets
         
        getMFData(dsid);

        
    }();

    
});

I really need to be able to change the data and its titles for this Table. All other tables work fine, but this one is giving me lots of grief.

Thanks in advance.

allan

Hi,

I've just added a reply to your other thread which details the steps I'd take and shows some code to implement them.

Allan