我遇到未捕获的TypeError:尝试在DataTable中显示子行时,无法读取未定义的属性'show'。我有显示的图像,但是当我单击时出现错误。
https://datatables.net/examples/api/row_details.html
我已经在他们的网站上查看了该指南,但似乎无法破解。还有其他人遇到过同样的问题吗?
注意-为了安全起见,我已经在ajax中重命名了字段和URL。 请在下面查看我的代码。
jQuery(document).ready(function () {
jQuery.ajax({
url: "URL Goes here",
method: "POST",
data: '{"Id":"' + id + '", "Title": "' + title + '", "Manager": "' + manager + '", "StartDate": "' + startDate + '", "Status": "' + status + '", "Applications": "' + applications + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
console.log(data);
var table = jQuery('#MyData').DataTable({
data: data.d,
retrieve: true,
responsive: true,
columns:
[
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{
"data": "ID",
"render": function (data, type, full, meta) {
return '<a target=_blank href="https://www.google.com' + data + '">' + data + '</a>';
}
},
{ "data": "Name" },
{ "data": "Manager" },
{ "data": "StartDate" },
{ "data": "Status" },
{ "data": "Applications" }
],
order: [[6, "desc"]]
});
// Add event listener for opening and closing details
jQuery('#MyData').on('click', 'td.details-control', function () {
var tr = jQuery(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
jQuery('div.slider', row.child()).slideUp(function () {
row.child.hide();
tr.removeClass('shown');
});
}
else {
// Open this row
jQuery('div.slider', row.child()).slideDown;
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
}
});
function format(d) {
// `d` is the original data object for the row
return
'<div class="slider" name>' +
'<table>' +
'<tr>' +
'<td>ID:</td>' +
'<td>' + d.Id + '</td>' +
'</tr>' +
'<tr>' +
'<td>Applications:</td>' +
'<td>' + d.Applications + '</td>' +
'</tr>' +
'</table>' +
'</div>'
}
});
答案 0 :(得分:0)
您正在使用响应式扩展以及子行功能。 According to Allan Jardine是jQuery DataTables的创建者,由于自适应扩展使用子行API,因此无法同时使用这两种功能。
请参阅feature compatibility chart,并请参阅有关响应式和子行功能的说明。
如果您只想始终在子行中显示某些列,则可以删除format()
函数,单击处理程序,然后将special class none
应用于元素的th
您想在子行中显示的列。
此外,如果您想在其自己的列上显示子行控件,请参见this example。