Display child rows using data table, ajax

Display child rows using data table, ajax

mbornmborn Posts: 44Questions: 17Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

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

    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

Sign In or Register to comment.