Display child rows using data table, ajax

mborn

Borrowing liberally from one of the blog posts, I have the following:

    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 it the child row
        row.child(table).show();

        // Child row DataTable configuration, always passes the parent row's id to server
        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: [
                {data: "StoreNumber"},
                {data: "AccountNumber"},
                {data: "RecordCount"},
                {data: "GrossPrice"},
                {data: "CommissionAmt"},
                {data: "NetSales"},
                {data: "AvgGross"},
                {data: "AvgNet"},
            ],
        });
    }

    // 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');
        }
    });

The php script listed in the ajax url appears to be returning the data I want, but I am getting the error jquery.datatables.1.10.12.js:4723 Uncaught TypeError: Cannot read property 'length' of undefined
at jquery.datatables.1.10.12.js:4723
at callback (jquery.datatables.1.10.12.js:3850)
at Object.success (jquery.datatables.1.10.12.js:3880)
at u (jquery-3.3.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.3.1.min.js:2)
at k (jquery-3.3.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.3.1.min.js:2)

Can anyone tell me my mistake?

kthorngren

It doesn't look like you are creating the thead for the child table. You can add it to the string when creating the var table on line 6 or you can use columns.title.

Kevin