Detail table not showing data

mike92117

Debugger code (debug.datatables.net): utajit
Error messages shown: none
Description of problem:

I'm trying to implement the master / detail example in this blog post (https://datatables.net/blog/2019-01-11). This is basically a datatable (for the detail table) inside of a master datatable row. I'm able to display the master table just fine. The api calls return the correct data. But nothing displays in the detail table other than the two column names and a "Loading..." message. These are edit tables by the way.

The debugger code shows two tables because I've expanded one row. Master table has rows but the debugger tells me the detail table is without data:

DataTables_Table_0
Data source: Ajax
Processing mode: Client-side
Draws: 1
Columns: 2
Rows - total: 0
Rows - after search: 0
Display start: 0
Display length: 10

Any idea why this is failing to display my data?

Here is my javascript source:

<script type="text/javascript" class="init">
    let selectedMaterialID = 0;
    $(function () {
        let editorMaterials = new $.fn.dataTable.Editor({
            ajax:  '/K/K',
            table: '#dtHXMaterials',
            fields: [
                {
                    label: 'Material:',
                    name: 'Material'
                }
            ]
        });

        let hxMaterialsTable = $('#dtHXMaterials').DataTable({
            dom: "Bfrtip",
            pageLength: 25,
            ajax: {
                url: "/K/K",
                type: "GET"
            },
            columns: [
                {
                    className: 'details-control',
                    orderable: false,
                    data: null,
                    defaultContent: ''
                },                
                { data: "Material" },
                { data: "MaterialID", 'visible': false },
                { data: "CreatorID", 'visible': false }
            ],
            select: {
                style: "single"
            },            
            buttons: [
                { extend: "create", editor: editorMaterials }
            ],
            order: [[1, 'asc']]
        });

        hxMaterialsTable.on('click', 'td.details-control', function (e) {
            let tr = e.target.closest('tr');            
            let row = hxMaterialsTable.row(tr);
            
            if (row.child.isShown()) {                
                destroyChild(row);
                tr.classList.remove('shown');
            }
            else {            
                createChild(row);
                tr.classList.add('shown');                
            }            
        });

        function createChild(row) {
            let rowData = row.data();
            console.dir(rowData);
            selectedMaterialID = rowData.MaterialID;
            let sURL = '/k/kt/' + selectedMaterialID;
            console.log(sURL);

            let table = $('<table class="display" width="100%"/>');
            row.child(table).show();

            let xyEditor = new $.fn.dataTable.Editor({
                ajax: {
                    url: sURL,
                    dataType: 'json',
                    data: function (d) {
                        d.HXMaterialID = rowData.MaterialID;
                    }
                },
                table: table,
                fields: [
                    {
                        label: 'Temperature',
                        name: 'HXMaterialData.X1'
                    },
                    {
                        label: 'Thermal Conductivity',
                        name: 'HXMaterialData.Y'
                    }
                ]
            });

            let xyTable = table.DataTable({
                dom: "Bt",
                ajax: {
                    url: sURL,
                    data: function (d) {
                        d.HXMaterialID = rowData.MaterialID;
                    },
                    success: function (e) {
                        console.log('ajax success function, materialID: ' + selectedMaterialID);
                        console.dir(e);
                        e.data.forEach((item, i) => console.log(item.X1 + ', ' + item.Y));
                        
                        console.log(e.data[0].X1 + ", " + e.data[0].Y);
                    },
                    failure: function (e) {
                        alert(e);
                    }
                },
                columns: [
                    { title: "Temperature", data: "HXMaterialData.X1" },
                    { title: "Thermal Conductivity", data: "HXMaterialData.Y" }
                ],
                select: true,
                buttons: [
                    { extend: "create", editor: xyEditor },
                    { extend: "edit", editor: xyEditor },
                    { extend: "remove", editor: xyEditor },
                ]
            });
        }

        function destroyChild(row) {
            $("table", row.child()).DataTable().destroy();
            row.child.hide();
        }
    });
</script>

kthorngren

But nothing displays in the detail table other than the two column names and a "Loading..." message.

Here are a couple initial troubleshooting steps:

1. See if you have errors in the browser's console.
2. Use the browser's network inspector to see the XHR request and response.

Let us know what you find.

A link to your page or test case replicating the issue will allow us to help with troubleshooting.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mike92117

First of all, thanks for helping! I'll look at creating a test case.

No errors in console.
Network inspector shows the XHR request/response

https://localhost:44354/k/kt/28?HXMaterialID=28&_=1691628002966

Response:

{
"draw": null,
"data": [
{
"DT_RowId": "row_30",
"ID": 30,
"HXMaterialID": 28,
"X1": 80.33,
"X2": 0.0,
"Y": 8.667
},
{
"DT_RowId": "row_31",
"ID": 31,
"HXMaterialID": 28,
"X1": 260.33,
"X2": 0.0,
"Y": 9.8226
},
{
"DT_RowId": "row_32",
"ID": 32,
"HXMaterialID": 28,
"X1": 440.33,
"X2": 0.0,
"Y": 10.9782
},
{
"DT_RowId": "row_33",
"ID": 33,
"HXMaterialID": 28,
"X1": 620.33,
"X2": 0.0,
"Y": 11.556
},
{
"DT_RowId": "row_34",
"ID": 34,
"HXMaterialID": 28,
"X1": 800.33,
"X2": 0.0,
"Y": 13.2894
}
],
"recordsTotal": null,
"recordsFiltered": null,
"error": null,
"fieldErrors": [],
"id": null,
"meta": {},
"options": {},
"searchPanes": {
"options": {}
},
"files": {},
"upload": {
"id": null
},
"debug": null,
"cancelled": []
}
{
"draw": null,
"data": [
{
"DT_RowId": "row_30",
"ID": 30,
"HXMaterialID": 28,
"X1": 80.33,
"X2": 0.0,
"Y": 8.667
},
{
"DT_RowId": "row_31",
"ID": 31,
"HXMaterialID": 28,
"X1": 260.33,
"X2": 0.0,
"Y": 9.8226
},
{
"DT_RowId": "row_32",
"ID": 32,
"HXMaterialID": 28,
"X1": 440.33,
"X2": 0.0,
"Y": 10.9782
},
{
"DT_RowId": "row_33",
"ID": 33,
"HXMaterialID": 28,
"X1": 620.33,
"X2": 0.0,
"Y": 11.556
},
{
"DT_RowId": "row_34",
"ID": 34,
"HXMaterialID": 28,
"X1": 800.33,
"X2": 0.0,
"Y": 13.2894
}
],
"recordsTotal": null,
"recordsFiltered": null,
"error": null,
"fieldErrors": [],
"id": null,
"meta": {},
"options": {},
"searchPanes": {
"options": {}
},
"files": {},
"upload": {
"id": null
},
"debug": null,
"cancelled": []
}
{
"draw": null,
"data": [
{
"DT_RowId": "row_30",
"ID": 30,
"HXMaterialID": 28,
"X1": 80.33,
"X2": 0.0,
"Y": 8.667
},
{
"DT_RowId": "row_31",
"ID": 31,
"HXMaterialID": 28,
"X1": 260.33,
"X2": 0.0,
"Y": 9.8226
},
{
"DT_RowId": "row_32",
"ID": 32,
"HXMaterialID": 28,
"X1": 440.33,
"X2": 0.0,
"Y": 10.9782
},
{
"DT_RowId": "row_33",
"ID": 33,
"HXMaterialID": 28,
"X1": 620.33,
"X2": 0.0,
"Y": 11.556
},
{
"DT_RowId": "row_34",
"ID": 34,
"HXMaterialID": 28,
"X1": 800.33,
"X2": 0.0,
"Y": 13.2894
}
],
"recordsTotal": null,
"recordsFiltered": null,
"error": null,
"fieldErrors": [],
"id": null,
"meta": {},
"options": {},
"searchPanes": {
"options": {}
},
"files": {},
"upload": {
"id": null
},
"debug": null,
"cancelled": []
}

kthorngren

Looks like the response is is triplicated (is that a word ;-) ). Does the response actually have three copies of the row data or is it a copy/paste error?

I just noticed you are using the success function in your child table's ajax option. The docs state this:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

Since its debug messages you can remove it or place them in the ajax.dataSrc option. Not sure but this might cause the problem with the data not showing.

Kevin

mike92117

Geez! That fixed it and it's working perfectly now! I knew that about the success function but forgot it as I use DataTables every so often, evidently just enough to forget a key datum like that!

The triplicate paste was probably one paste for each cup of coffee.

Thanks Kevin!

kthorngren

The triplicate paste was probably one paste for each cup of coffee.

I have that problem too!

Kevin