Displaying child rows

Displaying child rows

mbornmborn Posts: 44Questions: 17Answers: 0

I'm working on displaying child rows using ajax. I've used a couple of blog posts as examples (https://datatables.net/blog/2019-01-11 is one). When I run, I'm sending and receiving the correct request and responses from the server, but am getting a child row where all the fields show as "undefined". I believe I'm really close and am missing something obvious.

    var passStoreNumber = 0;

    /* Formatting function for row details  */
    function format(d) {
        return $('<tr>' +
            '<td></td>' +
            '<td>' + d.StoreNumber + '</td>' +
            '<td>' + d.AccountNumber + '</td>' +
            '<td>' + d.RecordCount + '</td>' +
            '<td>' + d.GrossPrice + '</td>' +
            '<td>' + d.CommissionAmt + '</td>' +
            '<td>' + d.NetSales + '</td>' +
            '<td>' + d.AvgGross + '</td>' +
            '<td>' + d.AvgNet + '</td>' +
            '</tr>').toArray();
    }

    function createChild(row) {

        var rowData = row.data();

        // This is the table we'll convert into a DataTable
        var table = $('<table class="display" width="100%"/>');

        // Display the child row
        //row.child(table).show();

        var childStoreTable = table.DataTable({
            dom: "lrti",
            // pageLength: 5,
            "lengthChange": false,
            bSort: false,
            bInfo: false,
            ajax: {
                url: "api/getChildRowsStore.php",
                dataSrc: 'data',
                type: "post",
                data: {
                    storenumber: passStoreNumber,
                    startdate: "<?=$saveStartDate?>",
                    enddate: "<?=$saveEndDate?>",
                },
            },
            columns: [
                {
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                {data: "StoreNumber"},
                {data: "AccountNumber"},
                {data: "RecordCount"},
                {data: "GrossPrice"},
                {data: "CommissionAmt"},
                {data: "NetSales"},
                {data: "AvgGross"},
                {data: "AvgNet"},
            ],
        });

        // Display the child row
        row.child( format(row.data()) ).show();
    }

        function destroyChild(row) {
        var table = $("table", row.child());
        table.detach();
        table.DataTable().destroy();

        // And then hide the row
        row.child.hide();
    }



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

        passStoreNumber = storeTable.cell(row, 1).data();

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

This question has an accepted answers - jump to answer

Answers

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

    Have you seen this blog for ajax loaded child details?

    Its hard to say what the problem might be without seeing a running example with a sample of your data. If you are getting undefined then I would start by debugging the format function. I suspect the properties, like d.StoreNumber, you are trying to access don't exist. I would start by debugging the format function.

    Is it possible to provide a link to your page or a test case replicating the issue so we can help debug?
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • mbornmborn Posts: 44Questions: 17Answers: 0

    Kevin, thanks for the reply. It looks to me that I misidentified the problem. The response I'm receiving from the php script is an object, and is not loading the datatable. Is there a setting under ajax that tells it the format of the data the php script is sending?

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

    This example shows how to handle Ajax objects,

    Colin

  • mbornmborn Posts: 44Questions: 17Answers: 0
    edited August 2021

    Colin, thank you. In looking at the example vs what I now have, I'm missing what I'm doing wrong.

    The data table looks like this:

                var childStoreTable = table.DataTable({
                    dom: "lrti",
                    // pageLength: 5,
                    "lengthChange": false,
                    bSort: false,
                    bInfo: false,
                    ajax: {
                        url: "api/getChildRowsStore.php",
                        type: "post",
                        data: {
                            storenumber: passStoreNumber,
                            startdate: "<?=$saveStartDate?>",
                            enddate: "<?=$saveEndDate?>",
                        },
                    },
                    columns: [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": ''
                        },
                        {data: "StoreNumber"},
                        {data: "AccountNumber"},
                        {data: "RecordCount"},
                        {data: "GrossPrice"},
                        {data: "CommissionAmt"},
                        {data: "NetSales"},
                        {data: "AvgGross"},
                        {data: "AvgNet"},
                    ],
                });
    

    The response from the browser shows:

    I'm at a loss as to what I'm missing. Thanks for any additional assistance.

    Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

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

    Looks like you don't have your row data in the in the default location that Datatales looks for it in the JSON. Use ajax.dataSrc to point to the proper location. In your case the data looks to be in the root of the JSON so you will use the second example in the docs.

    Kevin

Sign In or Register to comment.