DataTables子行未捕获TypeError：无法设置空子行的属性'style'

Question

我正在尝试在DataTable中实现子行。我已经阅读了本教程，并在Stack上回顾了关于Cannot set property 'style' of null child rows的多个帖子。其中大多数提到html中缺少<th></th>标签。

我已确保将其包括在内，但仍然获得Cannot set property 'style' of null child rows

我的下面的代码；

HTML：

<table id="activeCandidatesList" class="display" style="overflow-x: auto;">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Candidate ID</th>
                                        <th>Candidate Name</th>
                                        <th>Candidate Email</th>
                                        <th>Requisition Applied To</th>
                                        <th>Application Source</th>
                                        <th>Applied On Date</th>
                                    </tr>
                                </thead>
                            </table>

Javascript：

//Candidate List

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>Req Applied To:</td>' +
    '<td>' + d.RequisitionAppliedTo + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Source:</td>' +
    '<td>' + d.ApplicationSource + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Applied Date:</td>' +
    '<td>' + d.AppliedOnDate + '</td>' +
    '</tr>' +
    '</table>';
};

var candCandId = jQuery('CandId').val();
var candCandidateName = jQuery('CandidateName').val();
var candPrimaryEmailAddress = jQuery('PrimaryEmailAddress').val();
var candRequisitionAppliedTo = jQuery('RequisitionAppliedTo').val();
var candApplicationSource = jQuery('ApplicationSource').val();
var candAppliedOnDate = jQuery('AppliedOnDate').val();
jQuery(document).ready(function () {
jQuery.ajax({
    url: "/WebServices/getCandidateList.asmx/GetCandidateList",
    method: "POST",
    data: '{"CandId":"' + candCandId + '", "CandidateName": "' + candCandidateName + '", "PrimaryEmailAddress": "' + candPrimaryEmailAddress + '", "RequisitionAppliedTo": "' + candRequisitionAppliedTo + '","ApplicationSource": "' + candApplicationSource + '","AppliedOnDate": "' + candAppliedOnDate + '"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        var table = jQuery('#activeCandidatesList').DataTable({
            data: data.d,
            serverSide: true,
            retrieve: true,
            //responsive: true,
            columns:
                [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ""
                    },
                    { "data": "CandId" },
                    { "data": "CandidateName" },
                    { "data": "PrimaryEmailAddress" },
                    { "data": "RequisitionAppliedTo" },
                    { "data": "ApplicationSource" },
                    { "data": "AppliedOnDate" },
                ],
            order: [[0, "ASC"]],
            pageLength: 5,
            dom: 'Bfrtip',
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copy'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fa fa-file-pdf-o"></i>',
                    titleAttr: 'PDF'
                }
            ]
        });
    }
});



// Add event listener for opening and closing details
$('#activeCandidatesList tbody').on('click', 'td.details-control', function () {
    var tr = jQuery(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
        row.child(format(row.data())).show();
        tr.addClass('shown');
    }
});
});