Can't get child rows to work

lorikay4

The table doesn't render at all, and therefore the child rows don't render either. I can't understand the error that is returned.

'''
Uncaught TypeError: Cannot read property 'style' of undefined
at Ha (jquery.dataTables.min.js:formatted:1428)
at ha (jquery.dataTables.min.js:formatted:1135)
at e (jquery.dataTables.min.js:formatted:2128)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:formatted:2132)
at Function.each (jquery-1.12.4.js:370)
at jQuery.fn.init.each (jquery-1.12.4.js:137)
at jQuery.fn.init.m [as dataTable] (jquery.dataTables.min.js:formatted:1944)
at jQuery.fn.init.h.fn.DataTable (jquery.dataTables.min.js:formatted:4055)
at HTMLDocument.<anonymous> (index2.php:303)
at fire (jquery-1.12.4.js:3232)
Ha @ jquery.dataTables.min.js:formatted:1428
ha @ jquery.dataTables.min.js:formatted:1135
e @ jquery.dataTables.min.js:formatted:2128
(anonymous) @ jquery.dataTables.min.js:formatted:2132
each @ jquery-1.12.4.js:370
each @ jquery-1.12.4.js:137
m @ jquery.dataTables.min.js:formatted:1944
h.fn.DataTable @ jquery.dataTables.min.js:formatted:4055
(anonymous) @ index2.php:303
fire @ jquery-1.12.4.js:3232
fireWith @ jquery-1.12.4.js:3362
ready @ jquery-1.12.4.js:3582
completed @ jquery-1.12.4.js:3617
'''

Here is my example:

https://www.star.nesdis.noaa.gov/prodCatalog/index2.php

Here is my data source / json file:

https://www.star.nesdis.noaa.gov/prodCatalog/contentIncludes/prodCatalog/ProductCatalog_20170705.txt

Here is my javascript.

'''
/* Formatting function for row details - modify as you need */
function format ( d ) {
// d is the original data object for the row
return '

'+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '

Spatial resolution	'+d.Spat_Res+'	Performance Accuracy	'+d.Perf_Accuracy+'	Processing Organization	'+d.Proc_Org+'	Mission Assurance	'+d.Mission_Assurance+'
Criticality	'+d.Criticality+'	Operational Availability	'+d.Op_Avail+'	QC Monitoring	'+d.QC_Monitoring+'	Security Level	'+d.Sec_Level+'
Primary User	'+d.Primary_User+'	Dissemination Mode	'+d.Diss_Mode+'	Local/Remote Staging Area	'+d.Loc_Remote_Staging+'	Applications	'+d.Primary_App+', ' + d.Secondary_App + '
Archive Location	'+d.Archive_Loc+'	Latency	'+d.Latency+'	Volume (MB/Day)	'+d.Volume+'

';
}

$(document).ready(function() {
var table = $('#historyAll').DataTable( {
"ajax": "contentIncludes/prodCatalog/ProductCatalog_20170705.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"products": null,
"defaultContent": ''
},
{ "products": "Algorithm" },
{ "products": "Prod_Name" },
{ "products": "Prod_Descr" },
{ "products": "Prod_Class" },
{ "products": "Satellite" },
{ "products": "Sensors" },
{ "products": "PI" },
{ "products": "Division" },
{ "products": "OpStatus" }
],
"lengthMenu": [[30, 60, 90, -1], [30, 60, 90, "All"]],
"order": [[1, 'asc']],
"ordering": true
} );

// Add event listener for opening and closing details
$('#historyAll tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

$("table#historyAll tr:odd").addClass("odd");

} );

'''

Please advise any guidance possible. Thank you.

kthorngren

`Uncaught TypeError: Cannot read property 'style' of undefined

This usually means that the number of columns in your table don't match the number in your Datatables init code. Your table has 9 columns but you are defining 10 in Datatables. You need to add a column for your child row control. The HTML tab of this example shows how this is done:
https://datatables.net/examples/api/row_details.html

Kevin

lorikay4

AAAARGH! I included it in the javascript but forgot the empty column in the html.

Now working, thanks so much!

https://www.star.nesdis.noaa.gov/prodCatalog/index2.php