Need help with child rows

StanR

I'm sorry, but I don't have a link to my table.

In my table, I see the expand icon, and when I click on it, I see the area where my child rows should be displayed. The labels are there, but instead of my data, I see the message "undefined."

I know that my table is reading my data from MySQL because I see data values from the same row in the initial view.

Here's the code I've added in support of child rows:

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Explanation:</td>'+
            '<td>'+d.explanation+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Groovydoc:</td>'+
            '<td>'+d.groovydoc+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Source Code for Class:</td>'+
            '<td>'+d.source_code+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Example of Use:</td>'+
            '<td>'+d.use_case+'</td>'+
        '</tr>'+
    '</table>';
}

    // Add event listener for opening and closing details
    $('#example 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');
        }
    } );

I have this working on other tables. Any ideas?

colin

Hi @StanR ,

Yep, that looks like it should work, it's more or less identical to this example.

I hate to say it, but I think we'd need to see it failing. Would you be able to create a test case or link to your page?

If not, given the code is so small, it's got to be something to do with line 36, where it calls format. It would be worth adding some debug there and printing out row.data() and see if that leads anywhere.

Cheers,

Colin

kthorngren

Without seeing your Datatables data structure its hard to say. I would start with using console.log(d); as the first line of the format function. Does the data structure match the attributes you are trying to access?

Kevin

StanR

kthorngren:

my data has one tinyint (id) and 8 varchars.

where does the output go when you call console.log?

thanks.

kthorngren

where does the output go when you call console.log?

In your browser's developer tools you will want to open your browser's Javascript Console.

Kevin

StanR

I have another table that includes this code:

          'select': {
             'style': 'multi',
             'selector': 'td:not(:first-child)'
          },

Is that part of the picture?

StanR

In Chrome's DevTools, I see the error :Uncaught ReferenceError: SyntaxHighlighter is not defined at demo.js:3." Could that be my problem and, if so, how do I fix it?

StanR

kthorngren:

that's what i thought. i don't see any info about my data.

colin

That's probably unrelated, but yep, worth looking at. You should see the output to the console.log(), which would be the most useful.

kthorngren

I have another table that includes this code:

All that code does is to keep from selecting a row when the first column is clicked and allow for multi selection. If using the Select extension with this DataTable you may want to use the 'selector': 'td:not(:first-child)' option to keep from selecting the row when clicking the child plus button.

I see the error :Uncaught ReferenceError: SyntaxHighlighter is not defined at demo.js:3." Could that be my problem and, if so, how do I fix it?

This is outside of Datatables. A google search should help you.

When you click the plus button to see the child row do you receive output from the console.log statement?

Kevin

StanR

i did. here's the log.

ChildRows.bak.html:14 GET https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.cs net::ERR_ABORTED 404
ChildRows.bak.html:10 GET http://sww.sas.com/media/css/site-examples.css?_=1947239… net::ERR_ABORTED 404 (Not Found)
ChildRows.bak.html:29 GET http://sww.sas.com/media/js/site.js?_=5e8f232… net::ERR_ABORTED 404 (Not Found)
ChildRows.bak.html:30 GET http://sww.sas.com/media/js/dynamic.php?comments-page=examples%2Fapi%2Frow_details.html net::ERR_ABORTED 404 (Not Found)
ChildRows.bak.html:12 GET http://sww.sas.com/media/css/site-examples.css?_=758e23b… net::ERR_ABORTED 404 (Not Found)
demo.js:3 Uncaught ReferenceError: SyntaxHighlighter is not defined
at demo.js:3
ChildRows.bak.html:30 GET http://sww.sas.com/media/js/dynamic.php?comments-page=examples%2Fapi%2Frow_details.html net::ERR_ABORTED 404 (Not Found)

StanR

kevin:

i just sent the output i see in the console.

StanR

please ignore last comment.

no, i see no output when i display the child rows.

kthorngren

That would be unexpected output from the console.log(d); in the format() function. Was that in your console before clicking the plus button?

Try changing the console.log statement to this:
console.log('In the format function: ' + d);

This way you will see if d contains anything.

Kevin

StanR

yes, that was all in the console before i clicked the plus button.

i'm in the devtools on the console tab. I don't see the text "in the forrmat function.."

kthorngren

Sounds like this is not executing:
$('#example tbody').on('click', 'td.details-control', function () {

Is your table ID example? If not then replace the example with the ID of your table.

Kevin

StanR

i'm not sure. how do i find my table id?

StanR

is this it?

$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );

i've tried replacing #example with table.

StanR

<table id="example"

changing #example to example doesn't work

kthorngren

<table id="example"

You will need to use #example. The pound is used to designate the ID.

I'm confused, is the Datatables code you posted above the one you are using?

Try placing a similar console.log statement between these two lines:

    $('#example tbody').on('click', 'td.details-control', function () {
       console.log('click event');
        var tr = $(this).closest('tr');

This way we can see if the click event is working.

Are you able to post a link to your page so we can help troubleshoot?

Kevin

StanR

yes, the code i posted is taken from my current project.

StanR

now if i put console.log('In the format function: ' + d); in the format function, i see this in the log:In the format function: [object Object].

StanR

if i add console.log('click event'); i see this in the log: click event.

kthorngren

Try this instead in the format function:
console.log('In the format function: ', d);

This should show the contents of d.

Kevin

StanR

click event
In the format function: [object Object]

kthorngren

Hmm, try this then:
console.log(d);

Kevin

StanR

click event
Object
DT_RowId: "row1"
active: "0"
automated: "Yes"

the child columns aren't listed.

StanR

Object
DT_RowId: "row_1"
active: "0"
automated: "Yes"
category: "<a rel="nofollow" href="http://sww.sas.com/saspedia/REST_API_standards#Transport_protocol_requirements">Transport Protocol Requirements</a>"
request_response: "Both"
test: "APIs MUST support <a rel="nofollow" href="http://sww.sas.com/saspedia/UTF-8">UTF-8</a> in all text requests and responses."
proto:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
defineGetter: ƒ defineGetter()
defineSetter: ƒ defineSetter()
lookupGetter: ƒ lookupGetter()
lookupSetter: ƒ lookupSetter()
get proto: ƒ proto()
set proto: ƒ proto()
arguments: (...)
caller: (...)
length: 1
name: "set proto"
proto: ƒ ()

StanR

just to summarize, the data object is missing four columns -- the ones that were destined for the child rows.

kthorngren

Is the data you want displayed in the row details returned in your original ajax request?

Kevin

StanR

how would i know?