Javascript 无法在jQuery数据表中列出详细信息数据
在我的ASP.NETMVC项目中，我遵循了这个示例（只需查看页面上的“完整代码”部分），我可以正确地列出主数据和静态详细信息数据。但是，当我希望通过AJAX动态检索详细信息数据时，由于错误TypeError:table.fnOpen不是函数，我无法正确列出它们。有一个解决方案将DataTable更改为DataTable，但在这种情况下，我遇到了另一个错误。问题就出在click&format方法上，我认为我在某些定义上犯了一个错误。请你看一下，并向我说明错误在哪里，好吗？先谢谢你Javascript 无法在jQuery数据表中列出详细信息数据,javascript,jquery,asp.net-mvc,datatable,datatables,Javascript,Jquery,Asp.net Mvc,Datatable,Datatables,在我的ASP.NETMVC项目中，我遵循了这个示例（只需查看页面上的“完整代码”部分），我可以正确地列出主数据和静态详细信息数据。但是，当我希望通过AJAX动态检索详细信息数据时，由于错误TypeError:table.fnOpen不是函数，我无法正确列出它们。有一个解决方案将DataTable更改为DataTable，但在这种情况下，我遇到了另一个错误。问题就出在click&format方法上，我认为我在某些定义上犯了一个错误。请你看一下，并向我说明错误在哪里，好吗？先谢谢你 function
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');
});
}
});
});
函数格式（d）{
返回“”+
'' +
'' +
“姓名”+
“姓”+
“数字”+
'' +
'' +
''+d.学生姓名+''+
“+d.学生姓氏+”+
“+d.学生编号+”+
'' +
''
'';
}
$（文档）.ready（函数（）{
var表；
表=$（“#dtbLabGroup”）
.数据表(
//为简洁起见省略了代码
“栏目”：[
{
“类”：“详细信息控制”，
“可订购”：错误，
“数据”：空，
“defaultContent”：”
},
{“名称”：“实验室”}，
{“名称”：“附表”}，
{“名称”：“术语”}，
{“名称”：“状态”}
],
“订单”：[[1，‘asc']]，
});
//为打开和关闭详细信息添加事件侦听器
$（'#dtbLabGroup tbody'）。在（'click'，'td.details control'，函数（）{
//！！！这3个参数可能有问题
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
var nTr=$（this.parents（'tr'）[0]；
//
if（row.child.isShown（））{
//此行已打开-关闭它
$（'div.slider'，row.child（））.slideUp（函数（）{
row.child.hide（）；
tr.removeClass（“显示”）；
});
}
否则{
//打开这一排
row.child（格式为row.data（），'no padding'）.show（）；
tr.addClass（“显示”）；
$（'div.slider'，row.child（））.slideDown（）；
//！！！可能有问题
//！！！我添加了以下代码，用于通过AJAX调用检索数据。
var id=8；//用于测试的静态id
$.get（“GetStudents？id=”+id，函数（学生）{
表fnOpen（nTr，学生，“详细信息”）；
});
}
});
});
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;
}
函数格式（d）{
var htmlResult=''+
'' +
'' +
“姓名”+
“姓”+
“数字”+
'';
$。每个（d，函数（i，d）{
htmlResult+=''+d[i]。学生姓名+''+d[i]。学生姓氏+''+d[i]。学生编号+''；
});
htmlResult+=“”+
'';
返回htmlResult；
}
/。。。跳过。。。
//打开这一排
row.child（“加载…”，“无填充”）.show（）；
tr.addClass（“显示”）；
$（'div.slider'，row.child（））.slideDown（）；
$.getJSON（“GetStudents？id=“+id，函数（数据））{
$（'td'，row.child（））.html（格式（数据））；
$（'div.slider'，row.child（））.show（）；
});
// ... 跳过。。。
有关代码和演示，请参见。您需要在子行中显示加载指示器，通过Ajax检索内容并将其插入子行中以替换加载指示器 例如：
/。。。跳过。。。
//打开这一排
row.child（“加载…”，“无填充”）.show（）；
tr.addClass（“显示”）；
$（'div.slider'，row.child（））.slideDown（）；
$.getJSON（“GetStudents？id=“+id，函数（数据））{
$（'td'，row.child（））.html（格式（数据））；
$（'div.slider'，row.child（））.show（）；
});
// ... 跳过。。。
有关代码和演示，请参阅。
fnOpenDatatablesDatatablesfnOpenfnOpenfnOpenDatatablesDatatablesfnOpenfnOpen