Javascript 单击行的展开按钮时，Datatables row.data（）返回未定义

我想做一个扩展行，显示关于参与者数据的更详细信息。但是row.data（）返回undefined，子元素也不会出现，但在控制台上没有错误，它只是不做任何事情

我使用ajax到API来获取参与者数据

我已经尝试在ajax请求中放置（'click'），因为我怀疑这与ajax调用是异步的有关。但仍然没有区别

    function expandRowTemplate(rowData) {
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
                '<td>Nomor Identitas:</td>'+
                '<td>' + rowData.identity_number + '</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Ref. number:</td>'+
                '<td>' + rowData.reference_number + '</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Agama:</td>'+
                '<td>' + rowData.religion + '</td>'+
            '</tr>'+
        '</table>';
    };
    $('#participantTable').DataTable({
        scrollX: true,
        processing: true,
        serverSide: true,       
        ajax: {
            url: '/echo/json/',
            type: 'POST',
            data: (data) => { data.json = ajaxResponse },
            dataFilter: (data) => {
                var json = jQuery.parseJSON(data);
                json.recordsTotal = json.meta.pagination.total_data;
                json.recordsFiltered = json.meta.pagination.total_data < json.meta.pagination.item_per_page ? json.meta.pagination.total_data : json.meta.pagination.item_per_page;
                return JSON.stringify(json); // return JSON string
            },
            dataSrc: (resData) => {
                /* participantData = resData.data; */
                return resData.data;
            },
            error: (jqXHR) => {
                try {
                    let res = JSON.parse(jqXHR.responseText);
                    let messages = '';
                    res.meta.message.forEach(element => {
                        messages = messages + element;
                    });

                    alert(messages);

                } catch (e) {
                    /* xhrPool.abortAll(); */
                    console.log(e.message);
                }
            }
        },
        rowId: 'id',
        columns: [
            { 
                className: 'details-control',
                data: null,
                render: () => '<i class="far fa-plus-square"></i>',
                orderable: false,
                searchable: false
            },
            { title: 'ID', name: "id", data: "id" },
            { title: 'NAMA', data: "fullname" },
            { title: 'TEMPAT LAHIR', name: "place_of_birth", data: 'place_of_birth' },
            { 
                title: 'TANGGAL LAHIR', 
                name: "date_of_birth", 
                data: 'date_of_birth',
                render: (birthDateString) => { 
                    const birthDate = new Date(birthDateString);
                    const options = { year: 'numeric', month: 'short', day: '2-digit' };

                    const dateTimeFormat = new Intl.DateTimeFormat('id-ID', options);
                    return dateTimeFormat.format(birthDate);
                }
            },
            { title: 'GENDER',name: "gender", data: "gender" },
            { title: 'ASAL SEKOLAH',name: "school", data: "school" },
            { title: 'TGL REGISTRASI', name: "registration_date", data: "registration_date" },
        ],
        order: [[1, 'asc']],
        language: {
            processing: '<div class="sk-three-bounce" style="margin: auto"><div class="sk-child sk-bounce1 bg-gray-800"></div><div class="sk-child sk-bounce2 bg-gray-800"></div><div class="sk-child sk-bounce3 bg-gray-800"></div></div>',
            searchPlaceholder: 'Search...',
        }
    });

    var table = $('participantTable').DataTable();

    $('#participantTable tbody').on('click', 'td.details-control', function (ev) {
        ev.preventDefault();
        var tr = $(this).parents('tr');            
        var row = table.row(tr);

        if ( row.child.isShown() ) {            
            row.child.hide();
            $(this).children().removeClass('fa-minus-square');
            $(this).children().addClass('fa-plus-square');
        }
        else {
            console.log(row.data());

            row.child(expandRowTemplate(row.data())).show();
            $(this).children().removeClass('fa-plus-square');
            $(this).children().addClass('fa-minus-square');
        }
    } );

函数expandRowTemplate（rowData）{
返回“”+
''+
'名称识别：'+
''+rowData.identity_number+''号+
''+
''+
'参考编号：'+
''+行数据.参考号+''+
''+
''+
“阿加玛：”+
''+rowData.religation+''+
''+
'';
};
$（“#participantTable”）.DataTable({
是的，
处理：对，
服务器端：是的，
阿贾克斯：{
url:“/echo/json/”，
键入：“POST”，
data：（data）=>{data.json=ajaxResponse}，
数据过滤器：（数据）=>{
var json=jQuery.parseJSON（数据）；
json.recordsTotal=json.meta.pagination.total_data；
json.recordsFiltered=json.meta.pagination.total_data{
/*participantData=resData.data*/
返回resData.data；
},
错误：（jqXHR）=>{
试一试{
让res=JSON.parse（jqXHR.responseText）；
让消息=“”；
res.meta.message.forEach（元素=>{
消息=消息+元素；
});
警报（信息）；
}捕获（e）{
/*xhrPool.abortAll（）*/
控制台日志（e.message）；
}
}
},
rowId:'id'，
栏目：[
{ 
className:“详细信息控件”，
数据：空，
渲染：（）=>“”，
可订购：错误，
可搜索：false
},
{标题：“ID”，名称：“ID”，数据：“ID”}，
{标题：“NAMA”，数据：“全名”}，
{标题：'TEMPAT LAHIR'，名称：“出生地”，数据：“出生地”}，
{ 
标题：“TANGGAL LAHIR”，
姓名：“出生日期”，
数据：“出生日期”，
render：（birthDateString）=>{
const birthDate=新日期（birthDateString）；
常量选项={年：'数字'，月：'短'，日：'2位'；
const dateTimeFormat=新的Intl.dateTimeFormat（'id-id'，选项）；
返回日期timeformat.format（生日）；
}
},
{标题：“性别”，名称：“性别”，数据：“性别”}，
{标题：“ASAL SEKOLAH”，名称：“学校”，数据：“学校”}，
{标题：“TGL注册”，名称：“注册日期”，数据：“注册日期”}，
],
订单：[[1，‘asc']]，
语言：{
处理：''，
searchPlaceholder:“搜索…”，
}
});
var table=$（'participantTable'）.DataTable（）；
$（#ParticipantTabletBody'）。在（'click'，'td.details control'，函数（ev）上{
ev.preventDefault（）；
var tr=$（this.parents（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
row.child.hide（）；
$（this.children（）.removeClass（'fa-减号-square'）；
$（this.children（）.addClass（'fa-plus-square'）；
}
否则{
console.log（row.data（））；
row.child（expandRowTemplate（row.data（））.show（）；
$（this.children（）.removeClass（'fa-plus-square'）；
$（this.children（）.addClass（'fa-减号平方'）；
}
} );

这是我的建议

---

我希望行可以像这样展开

检查这行。它应该是

var table=$（'#participantTable'）。DataTable（）检查这行。它应该是
var table=$（'#participantTable'）。DataTable（）