无法在 jQuery Datatable 中列出详细信息数据 [英] Cannot list details data in jQuery Datatable
问题描述
我遵循了 jQuery 数据表 - 滑动子行 示例(只需查看完整代码" 部分)在我的 ASP.NET MVC 项目中,我可以列出 master &静态细节数据正确.但是,当我想通过 AJAX 动态检索详细信息数据时,由于错误 TypeError: table.fnOpen is not a function,我无法正确列出它们.有一个将 DataTable 更改为 dataTable 的解决方案,但在这种情况下,我遇到了另一个错误.问题正是在点击 &format 方法,我想我在某些定义上犯了一个错误.你能看一下并澄清错误在哪里吗?提前致谢...
I followed jQuery Datatable - Sliding child rows example (just look at "Complete code" section on that page) in my ASP.NET MVC project and I could listed master & static details data properly. However, when I want to retrieve details data dynamically via AJAX, I cannot listed them properly due to an error TypeError: table.fnOpen is not a function. There is a solution changing DataTable to dataTable, but in this case I encounter another errors. The problem is exactly on the click & format method and I think I made a mistake for some definition. Could you please have a look at and clarify me about where the mistake is? Thanks in advance...
function format(d) {
return '<div class="slider">' +
'<table style="width:100%">' +
'<tr>' +
'<th>Name</th>' +
'<th>Surname</th> ' +
'<th>Number</th>' +
'</tr>' +
'<tr>' +
'<td>' + d.StudentName + '</td>' +
'<td>' + d.StudentSurname + '</td> ' +
'<td>' + d.StudentNumber + '</td>' +
'</tr>' +
'</table>'
'</div>';
}
$(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');
});
}
});
});
更新一:下面是修改后的 format() 方法:
Update I: Here is the modified format() method below:
function format(d) {
var htmlResult = '<div class="slider">' +
'<table style="width:100%">' +
'<tr>' +
'<th>Name</th>' +
'<th>Surname</th> ' +
'<th>Number</th>' +
'</tr>';
$.each(d, function (i, d) {
htmlResult += '<tr><td>' + d[i].StudentName + '</td><td>' + d[i].StudentSurname + '</td><td>' + d[i].StudentNumber + '</td></tr>';
});
htmlResult += '</table>' +
'</div>';
return htmlResult;
}
推荐答案
您需要在子行显示加载指示器,通过 Ajax 检索内容并将其注入子行替换加载指示器.
You need to show loading indicator in the child row, retrieve content via Ajax and inject it into the child row replacing loading indicator.
例如:
// ... skipped ...
// Open this row
row.child('<p><center>Loading...</center></p>', '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 ...
有关代码和演示,请参阅此示例.
See this example for code and demonstration.
这篇关于无法在 jQuery Datatable 中列出详细信息数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!