Child Rows format function

Child Rows format function

ctechukctechuk Posts: 12Questions: 5Answers: 0

Afternoon datatables community,

I have been working on getting Dataatbles working using the examples https://datatables.net/examples/api/row_details.html.

In my local installation I am retrieving my data from ajax call to a php output which is json encoded.

My problem right now is that the below function which returns the child row is pulling data from (d) which is meant to be the original data object for the row not from the ajax call which modifies the column names (in the second code snippet below)

/* Formatting function for row details - modify as you need */
    function format ( d ) {
    // `d` is the original data object for the row
    //console.log(manageProductTable);
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Product Media:</td>'+
            '<td>'+d.productMedia+'</td>'+
        '</tr>'+
    '</table>';
    }
manageProductTable = $('#manageProductTable').DataTable({
        'ajax': 'php_action/fetchProduct.php',
        'columns': [
            {"data": null, "class": "details-control", "orderable": false, "defaultContent": "", "width": "2%"},
            null,
            null,
            null,
            null,
        null,
        null,
        null,
        null,
        {"name": "productMedia"}

So basically my format function is not seeing the columns changes made above and therefore cannot find the field d.productMedia to display.

I am sure that I am missing something fundamental, any help or advice would be greatly appreciated.

Replies

  • kthorngrenkthorngren Posts: 21,311Questions: 26Answers: 4,948

    It looks like your data is array based not object based. Here is more info:
    https://datatables.net/manual/data/#Data-source-types

    The columns.name gives the column a descriptive name that can be used with Datatables API's. But this doesn't turn it into a Javascript object. Instead of '<td>'+d.productMedia+'</td>'+ you will need to access the column using array notation. Something like this '<td>'+d[8]+'</td>'+.

    Kevin

  • ctechukctechuk Posts: 12Questions: 5Answers: 0

    Kevin,

    many thanks for the speedy reply. That has solved it. I did try something similar with extracting the element by array id. It rasied an error, I had left the . in between d and the element number.

    Again many thanks.

    Have a great Sunday. o:)

This discussion has been closed.