无法在jQuery Datatable中列出详细信息数据

我在我的ASP.NET MVC项目中遵循了jQuery Datatable – Sliding child rows示例（只看了那页上的“Complete code”部分），我可以正确地列出master和static details数据。 但是，当我想通过AJAX动态检索细节数据时，由于错误TypeError ，我无法正确列出它们：table.fnOpen不是函数 。 有一个解决方案将D ataTable改为d ataTable，但在这种情况下我遇到了另一个错误。 问题正是在click和format方法上，我认为我的定义错了。 你能不能看看并澄清我的错误在哪里？ 提前致谢…

function format(d) { return '
' + '' + '' + '' + ' ' + '' + '' + '' + '' + ' ' + '' + '' + '
Name
Surname
Number
' + d.StudentName + '
' + d.StudentSurname + '
' + d.StudentNumber + '
' '
'; } $(document).ready(function () { var table; table = $('#dtbLabGroup') .DataTable( //code omitted for brevity "columns": [ { "class": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "name": "Lab" }, { "name": "Schedule" }, { "name": "Term" }, { "name": "Status" } ], "order": [[1, 'asc']], }); // Add event listener for opening and closing details $('#dtbLabGroup tbody').on('click', 'td.details-control', function () { // !!! There might be a problem regarding to these 3 parameters var tr = $(this).closest('tr'); var row = table.row(tr); var nTr = $(this).parents('tr')[0]; // if (row.child.isShown()) { // This row is already open - close it $('div.slider', row.child()).slideUp(function () { row.child.hide(); tr.removeClass('shown'); }); } else { // Open this row row.child(format(row.data()), 'no-padding').show(); tr.addClass('shown'); $('div.slider', row.child()).slideDown(); // !!! There is PROBABLY a problem // !!! I added the following code for retrieving data via AJAX call. var id = 8; //used static id for testing $.get("GetStudents?id=" + id, function (students) { table.fnOpen(nTr, students, 'details'); }); } }); }); 

更新I：以下是修改后的format（）方法：

 function format(d) { var htmlResult = '
' + '' + '' + '' + ' ' + '' + ''; $.each(d, function (i, d) { htmlResult += ''; }); htmlResult += '
Name
Surname
Number
' + d[i].StudentName + '
' + d[i].StudentSurname + '
' + d[i].StudentNumber + '
' + '
'; return htmlResult; } 

Answer 1

您需要在子行中显示加载指示符，通过Ajax检索内容并将其注入替换加载指示符的子行。

例如：

 // ... skipped ... // Open this row row.child('
Loading...
', 'no-padding' ).show(); tr.addClass('shown'); $('div.slider', row.child()).slideDown(); $.getJSON("GetStudents?id=" + id, function(data){ $('td', row.child()).html(format(data)); $('div.slider', row.child()).show(); }); // ... skipped ... 

有关代码和演示，请参阅此示例 。