Using DataTable with child row with .net 5 - datatables

Question

I tied to create child row as instructed in https://datatables.net/. But unfortunately it is not working for me, it is not showing the plus sign to expand my row to see the additional information.
This is my view, can anyone tell me what is my mistake?
<div class="container">
<div style="width:90%; margin:0 auto;">
<div class="tn-pagetitle">
<h3 style="font-weight:bold;"> Instructor</h3>
</div>
<div class="indent4">
<partial name="_messageContainer" />
</div>
<table id="StudentInfo" class="table table-striped table-bordered dt-responsive nowrap"
width="100%" cellspacing="0">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>MI</th>
<th>Last Name</th>
<th>Gender</th>
<th>Student TWRAID </th>
<th>Race </th>
<th> </th>
</tr>
</thead>
</table>
</div>
and the Ajax part is below that should take care of adding plus sign to the each row.
<script>
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.zipCode + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extension number:</td>' +
'<td>' + d.has600Permit + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extra info:</td>' +
'<td>And any further details here (images etc)...</td>' +
'</tr>' +
'</table>';
}
$(document).ready(function () {
var table = $("#StudentInfo").DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"bInfo": true,
"ajax": {
"url": "#Url.Action("get_Student_Info", "Instructor")",
"type": "POST",
"datatype": "json"
},
"columnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}],
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
// { "data": "id", "name": "Id", "autoWidth": true },
{ "data": "firstName", "name": "First Name", "autoWidth": true },
{ "data": "mi", "name": "MI", "autoWidth": true },
{ "data": "lastName", "name": "Last Name", "autoWidth": true },
{ "data": "sex", "name": "Gender", "autoWidth": true },
{ "data": "twraid", "name": "Last Name", "autoWidth": true },
{ "data": "race", "name": "Race", "autoWidth": true },
{
"render": function (data, type, full, meta) {
return '<a class="btn btn-info btn-md " style="color:white" href="#Url.Action("Edit", "Instructor")/' + full.id + '">Edit</a>' + " " +
'<a class="btn btn-info btn-md" style="color:white" href="#Url.Action("Details", "Instructor")/' + full.id + '"> Details </a>' + " " +
'<a class="btn btn-info btn-md" style="color:white" href="#Url.Action("TransfertToREAL", "Instructor")/' + full.id + '"> Transfer to REAL </a>' + " " +
'<a class="btn btn-info btn-md" style="color:white" href="#Url.Action("UpdateStudent600Flag", "Instructor")/' + full.id + '"> Update student has 600 permit flag </a>' + " " +
'<a class="btn btn-danger btn-md" style="color:white" href="#Url.Action("Delete", "Instructor")/' + full.id + '"> Delete </a>'
}
},
]
});
$('#StudentInfo 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
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
});