Need help with child rows

Need help with child rows

StanRStanR Posts: 63Questions: 11Answers: 1
edited October 2018 in Free community support

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?

This question has an accepted answers - jump to answer

«1

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • StanRStanR Posts: 63Questions: 11Answers: 1

    kthorngren:

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

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

    thanks.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • StanRStanR Posts: 63Questions: 11Answers: 1

    I have another table that includes this code:

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

    Is that part of the picture?

  • StanRStanR Posts: 63Questions: 11Answers: 1

    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?

  • StanRStanR Posts: 63Questions: 11Answers: 1

    kthorngren:

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • StanRStanR Posts: 63Questions: 11Answers: 1

    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)

  • StanRStanR Posts: 63Questions: 11Answers: 1

    kevin:

    i just sent the output i see in the console.

  • StanRStanR Posts: 63Questions: 11Answers: 1

    please ignore last comment.

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • StanRStanR Posts: 63Questions: 11Answers: 1

    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.."

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • StanRStanR Posts: 63Questions: 11Answers: 1

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

  • StanRStanR Posts: 63Questions: 11Answers: 1

    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.

  • StanRStanR Posts: 63Questions: 11Answers: 1

    <table id="example"

    changing #example to example doesn't work

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited October 2018

    <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

  • StanRStanR Posts: 63Questions: 11Answers: 1

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

  • StanRStanR Posts: 63Questions: 11Answers: 1

    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].

  • StanRStanR Posts: 63Questions: 11Answers: 1

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    This should show the contents of d.

    Kevin

  • StanRStanR Posts: 63Questions: 11Answers: 1

    click event
    In the format function: [object Object]

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • StanRStanR Posts: 63Questions: 11Answers: 1

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

    the child columns aren't listed.

  • StanRStanR Posts: 63Questions: 11Answers: 1

    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: ƒ ()

  • StanRStanR Posts: 63Questions: 11Answers: 1

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • StanRStanR Posts: 63Questions: 11Answers: 1

    how would i know?

This discussion has been closed.