Nested Datatables

geebeetoo

Error messages shown: Uncaught TypeError: Cannot read properties of undefined (reading 'length')
Description of problem:
I am trying to create a page that will display 3 levels of nested datatables.
Basically the first datatable will expose multiple rows of data from an ajax call and which a user can click on the first <td> of any row to get more details for that row which will actually make another ajax call to get different data, and in turn that child datatable will also display another datatable instance of rows with the first <td> of each row allowing a final child datatable with yet again another ajax call to a different set of data.

I have the first (parent) datatable working and when I click on any row it will display a new row (which is good) but only show the column headers. And I get this error:
datatables.min.js:89 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

I checked the data response in console and the ajax call for the first child is returning 200 OK with an array of json objects just like the first ajax call.

Here is my code:

<script>
    let cReport;

    $(document).ready(function () {


        function format(rowData) {
            return "<table id='" + rowData.cuid + "' style='padding-left:50px;'>" + "</table>";
        }

        cReport = $('#first').DataTable(
            {
                ajax: {
                    url: "/ajaxData_interactions.php",
                    dataSrc: '',
                    dataType: 'json',
                    deferRender: true,

                },

            columns: [
                {
                    data: null,
                    orderable: false,
                    render: function (data, type, row) {
                        if (type === 'display') {
                            // Customize the first column with an icon and add data-cuid attribute
                            return "<td><i class='far fa-caret-square-down' ></i><i class='fas fa-spinner fa-pulse' style='display:none;' aria-hidden='true'></i></td>";
                        } else {
                            // For other types, return the raw data
                            return data;
                        }
                    }
                },
                { data: "eDate" },
                { data: "TimeInterval" },
                { data: "start" },
                { data: "cuid" },
                { data: "cuid2" },
                { data: "duration" },
                { data: null,
                  defaultContent: '',
                },
                { data: "status" },
                { data: "medium" },
                { data: "medium2" },
                { data: "direction" },
                { data: "service" },
                { data: "conTo" },
                { data: "conFrom" },
                { data: "cate" },

                // Define columns mapping to your JSON data
            ],
            createdRow: function (row, data, dataIndex) {
        
                let firstTd = $(row).find('td:first-child');
                firstTd.addClass('expand-row');

                let cuid = data.cuid; 
                firstTd.attr('data-cuid', cuid);
            }
        });

        cReport.on('click', '.expand-row', function (){
            let lookupValue = $(this).data('cuid')
            let tr = $(this).closest('tr');
            let row = cReport.row(tr);
            let rowData = row.data();
            if (row.child.isShown()) {
                // This row is already expanded, so collapse it
                row.child.hide();
                tr.removeClass('shown');
                // Destroy the Child Datatable
                $('#' + lookupValue).DataTable().destroy();
            } else {
                row.child(format(rowData)).show();
                let id = rowData.cuid
                $('#' + lookupValue).DataTable({
                    // dom: "t",
                    ajax: {
                        url: '/ajaxData_channels.php?cuid='+lookupValue, // Replace with the actual API URL
                        dataType: 'json',
                        deferRender: true,
                    },
                    columns: [
                        // {
                        //     data: null,
                        //     orderable: false,
                        // },
                        { data: "eDate" , title: 'Date'},
                        { data: "TimeInterval", title: 'Interval' },
                        { data: "start" , title: 'start'},
                        { data: "cuid" , title: 'cuid'},
                        { data: "cuid3" , title: 'cuid3'},
                        { data: "duration" , title: 'duration'},
                        { data: "offset" , title: 'offset'},
                        { data: "eReason" , title: 'eReason'},
                        { data: "parid" , title: 'parid'},
                        { data: "parole", title: 'parole'},
                        { data: "parpoint", title: 'parpoint' },
                    ],

                });
                // Show the expanded row
                tr.addClass('shown');
            }
        });

    });
</script>

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

kthorngren

Its hard to say what the problem might be without seeing the issue to debug. My guess is you have ajax.dataSrc set in the parent but not in the child Datatable. I would guess that your JSON response in the child isn't in the data object Datatables looks for. See the Ajax docs for details.

If this doesn't help then please post 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

Also you have deferRender inside the ajax option. It belongs outside at the level you have columns, etc.

Kevin

geebeetoo

Thank you for your help. It was my PHP script that was not working properly.