【发布时间】：2016-02-07 11:20:39
【问题描述】：
我有一个 jQuery DataTable，当您第一次访问它时页面加载时会正确加载。 jQuery DataTable 将包含所有正确的数据。我还能够成功地将新行添加到 DataTable。但是，当您尝试对现有行进行进一步编辑时，我收到以下错误：
这里是html表格代码：
<div class="row">
<div class="table-responsive">
<table id="LogEventsTable" style="overflow-x: hidden !important; overflow-y: auto !important;" class="table table-striped panel panel-info">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
这是每次进行编辑时都会调用的 LoadLogEventsTable 函数：
var LoadLogEventsTable = function (sortColumn, isDescending, logId) {
$('#LogEventsTable').DataTable({
"aoColumns": [
{ "sTitle": "#" },
{ "sTitle": "LogEventValueId" },
{ "sTitle": "Status Code" },
{ "sTitle": "Start Time (24 hr clock)" },
{ "sTitle": "End Time (24 hr clock)" },
{ "sTitle": "Duration" },
{ "sTitle": "Latitude" },
{ "sTitle": "Longitude" },
{ "sTitle": "Location Description" },
{ "sTitle": "Remarks" },
{
// credit to http://legacy.datatables.net/usage/columns
// (mData) This property can be used to read data from any JSON data source property,
// including deeply nested objects / properties. mData can be given in a
// number of different ways which effect its behaviour:
// null - the sDefaultContent option will be used for the cell
// (null by default, so you will need to specify the default
// content you want - typically an empty string). This can be
// useful on generated columns such as edit / delete action
// columns.
"mData": null,
"mRender": function (obj) {
// var userId = obj[0].toString();
// alert(obj.DT_RowId);
return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewLogEventHistory(this)" >Log Event Hist</a>';
// return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewParticularLogsInfo(this)" >Edit</a>';
}
},
{
// credit to http://legacy.datatables.net/usage/columns
// (mData) This property can be used to read data from any JSON data source property,
// including deeply nested objects / properties. mData can be given in a
// number of different ways which effect its behaviour:
// null - the sDefaultContent option will be used for the cell
// (null by default, so you will need to specify the default
// content you want - typically an empty string). This can be
// useful on generated columns such as edit / delete action
// columns.
"sTitle": "Edit",
"mData": null,
"mRender": function (obj) {
// var userId = obj[0].toString();
// alert(obj.DT_RowId);
return '<a href="#" id="' + obj.DT_RowId + '" onclick="EditLogEvent(this)" >Edit</a>';
// return '<a href="#" id="' + obj.DT_RowId + '" onclick="ViewParticularLogsInfo(this)" >Edit</a>';
}
},
],
"aoColumnDefs": [{ "bVisible": false, "aTargets": [1, 6, 7, 9, 10] }],
"fnDrawCallback": function (oSettings) {
var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate');
var scrbdy = $(oSettings.nTableWrapper).find('.dataTables_scrollBody');
scrbdy.css('overflow-x', 'hidden !important');
scrbdy.css('overflow-y', 'auto !important');
if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
pgr.hide();
} else {
pgr.show()
}
},
"iDisplayLength": 10,
"sDom": '<"clear">frtip',
"bProcessing": true,
"bServerSide": false,
"bLengthChange": false,
"bPaginate": true,
"bDestroy": true,
"bSort": false,
"bInfo": true,
"bFilter": false,
"sAjaxSource": 'ParticularLogsDetails.aspx/BindLogEventsTable',
"bJQueryUI": true,
"bDeferRender": true,
"sPaginationType": "full_numbers",
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "sortColumn", "value": sortColumn },
{ "name": "isDescending", "value": isDescending },
{ "name": "logId", "value": logId }
);
},
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success":
function (msg) {
var obj = jQuery.parseJSON(msg.d);
// alert(msg.d);
fnCallback(obj);
//if (null == $('#LogEventsTable').DataTable()) {
// alert("log events table is Null");
//}
var displayDataTable = $('#LogEventsTable').DataTable();
// var versionNo = $.fn.dataTable.version;
// alert(versionNo);
if (obj.loggedInUserRole == 2 || obj.isFrozen == true) {
displayDataTable.columns([11]).visible(false);
$('#btn-AddNewEventSecondOuterDiv').css('display', 'none');
$('#btn-AddNewEventOuterDiv').css('display', 'none');
$('#btn-AddNewEvent').css('display', 'none');
$('#btn-LogEditSecondOuterDiv').css('display', 'none');
$('#btn-LogEditOuterDiv').css('display', 'none');
$('#btn-LogEdit').css('display', 'none');
} // end if (obj.loggedInUserRole == 2)
},
beforeSend: function () {
$('.loader').show()
},
complete: function () {
$('.loader').hide()
}
});
}
})
}
有人可以告诉我如何解决上述错误吗？
【问题讨论】：
-
nTHead属性为空，因此读取null的parentNode属性会引发错误。不过，您还没有向我们展示任何代码来帮助您诊断错误。 -
我刚刚更新了我发布的问题以包含 HTML 表格，以及每当表格发生更改时调用的加载数据函数。
-
@rory-mccrossan 我相信我已经发现了有关该问题的更多信息。你知道如何在 jquery DataTable 创建函数中以编程方式添加 thead 元素吗？
标签： jquery jquery-ui jquery-plugins datatables