Child Row For Extra details using ASP ViewData HTMLRAW Json Data

DigitalValkarie

I've been using datatables successfully by passing my Newsoft formatted JSON to a variable in the view like so:

var dataList = @Html.Raw(@ViewData["jsonData"]);

The resulting dataList looks as you'd expect:

 var dataList =  [
    {   
    "Name":"FOO",
    "Environment":"PROD",
    "Description":"HealthCheck",``
    "Url":"https://somewebsite.com/api/healthcheck",
    "IsEnabled":true,
    "Status":"OK",
    "LastCheck":"2023-01-20T23:25:01.389556Z",
    "DeepHealth":null,

    },
    ...
]

This has worked well for all my dataTable needs up until now. I'm trying to use the child-rows method provided at:
https://datatables.net/examples/api/row_details.html
Although, I have found the info at https://www.gyrocode.com/articles/jquery-datatables-how-to-expand-collapse-all-child-rows/ that uses "detail-control" rather than "dt-control" will allow the basic table to display properly.

My issue occurs when I try to expand the child row.

I've followed the examples pretty closely. The data I am trying to show in the child row is obviously presented on the regular, but I just wanted to see if I can get data I know it knows about to work. I even just tried adding the row with static info.

Javascript:

function format(d) {
        // `d` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
            '<tr>' +
            '<td>Full name:</td>' +
            '<td>' + d.Name + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extension number:</td>' +
            '<td>' + d.Status + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extra info:</td>' +
            '<td>STUFF</td>' +
            '</tr>' +
            '</table>';
    }



    $(document).ready(function () {

        var dataList =  @Html.Raw(@ViewData["jsData"]);

        $("#ServiceHealth").DataTable({
            "order": [[3, 'asc']],
            dom: 'Bfrtip',
            lengthMenu: [
                [25, 10, 25, 50, 100, -1],
                [25, 10, 25, 50, 100, 'All'],
            ],
            buttons: [
                'spacer',
                'pageLength',
                'colvis',
                'excel',
                'print',
                'csv'
            ],
            data: dataList,
            columns: [
                {
                    'className': 'details-control',
                    'orderable': false,
                    'data': null,
                    'defaultContent': ''
                },
                { data: 'Name' },
                { data: 'Status' },
                { data: 'LastCheck'},
                { data: 'Environment' },
                { data: 'IsEnabled'},
                { data: 'Url' },
                { data: 'DeepHealth'}
            ],
            columnDefs: [
                {
                    targets: 3,
                    render: DataTable.render.datetime(),
                }
            ]
        });

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

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass("shown");
            } else {
                // Open this row
                console.log(row.data);
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });


HTML:

        <table class="display" id="ServiceHealth" name="ServiceHealth" style="width:95%">
                                <thead>
                                    <tr>
                                            <th></th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Last Checked</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Environment</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Enabled?</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Url</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">DeepHealth</th>
                                    </tr>
                                </thead>

                                <tfoot>
                                    <tr>
                                            <th></th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Environment</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Last Checked</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Service</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Enabled?</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Url</th>
                                        <th class="text-start text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">DeepHealth</th>
                                    </tr>
                                </tfoot>
                            </table>

I've been beating on this for 2.5 days now:

I keep running into this error:

Uncaught ReferenceError: table is not defined
    at HTMLTableCellElement.<anonymous> (ServiceHealth:380:23)
    at HTMLTableSectionElement.dispatch (VM101 datatables.min.js:14:43064)
    at HTMLTableSectionElement.v.handle (VM101 datatables.min.js:14:41048)

 // Add event listener for opening and closing details
        $("#ServiceHealth tbody").on("click", "td.details-control", function () {
            var tr = $(this).closest("tr");
            var row = table.row(tr);    <<<----- Developer Tools highlights to this as line 380.

I'd rather not use an Ajax call for data I already have locally.
I'd rather not generate a Hardcoded HTML for this (and havent found good examples of how to format the HTML for child row anyways.

Can someone throw me a bone?

colin

Yep, it looks like line 67 of your code has:

var row = table.row(tr);

but as you say, table hasn't been defined.

Try changing line 25 to be

var table = $("#ServiceHealth").DataTable({

and that should do the trick,

Colin