当我通过 Ajax 重新加载数据表时，我不断收到“Uncaught TypeError: Cannot read property 'aoData' of null”。我基本上有一个主数据表（table_1），每一行都有一个链接，其中包含一个弹出模式，其中包含另一个数据表。（我使用 PHP 为模式和内部表格填充特定的类和 id，以确保它们都保持唯一。）这是解释我在说什么的代码：
<table id="table_1">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-toggle="modal" href="#<?=$row3->ID?>">link to open modal</a>
<div class="modal fade" id="<?=$row3->ID?>" tabindex="-1" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">My modal that houses a new table inside</h4>
</div>
<div class="modal-body">
<table id="new_<?=$row3->ID?>">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td align="center"><a class="edithours_<?=$row3->ID?>" href="javascript:;">Edit</a></td>
<td align="center"><a class="deletehours_<?=$row3->ID?>" href="javascript:;">Delete</a></td>
</tr>
</tbody>
</table>
<div class="table-toolbar">
<div class="btn-group pull-right">
<button id="new_<?=$row3->ID?>" class="btn green"> <i class="icon-plus"></i> Add </button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div></td>
</tr>
</tbody>
</table>
位于模态框内的数据表行可以通过 ajax 添加、删除和编辑。一切都很好，直到我运行一个完全重新加载整个事情的 ajax 调用。Ajax 调用成功，并且所有数据都正确加载，但由于某种原因，在重新加载后，当我尝试编辑、删除或保存位于模式内的数据表行时，我在控制台日志中收到上述错误。请注意，主表仍然可以正常工作，并且所有模式都可以正常工作。我什至可以添加行...我只是无法编辑、删除或保存它们。这是调用“第二层”数据表的函数，这些数据表包含在允许我进行编辑的函数中。它在加载时和 ajax 重新加载后都被调用。
function loadTables(id) {
var TableEditable = 'TableEditable_' + id;
window[TableEditable] = function() {
return {
//main function to initiate the module
init: function() {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
//oTable.fnClearTable(this);
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
if (aData[0] == '2') {
var sickHours = ' selected="selected"';
var vacHours = '';
} else if (aData[0] == '3') {
var sickHours = '';
var vacHours = ' selected="selected"';
} else {
var sickHours = '';
var vacHours = '';
}
if (aData[2] == '') {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = mm + '/' + dd + '/' + yyyy;
} else {
today = aData[2];
}
jqTds[0].innerHTML = '<select class="form-control input-small select2me"><option' + sickHours + ' value="2">Sick</option><option' + vacHours + ' value="3">Vacation</option></select></select>';
jqTds[1].innerHTML = '<input type="text" id="hours" class="form-control input-xsmall" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input class="form-control form-control-inline input-small2 date-picker" size="4" type="text" value="' + today + '" />';
jqTds[3].innerHTML = '<center><a class="edithours_' + id + '" href="">Save</a></center>';
jqTds[4].innerHTML = '<center><a class="cancelhours_' + id + '" href="">Cancel</a></center>';
FormComponents.init();
}
function editRow2(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
if (aData[0] == '2') {
var sickHours = ' selected="selected"';
var vacHours = '';
} else if (aData[0] == '3') {
var sickHours = '';
var vacHours = ' selected="selected"';
} else {
var sickHours = '';
var vacHours = '';
}
if (aData[2] == '') {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd
}
if (mm < 10) {
mm = '0' + mm
}
today = mm + '/' + dd + '/' + yyyy;
} else {
today = aData[2];
}
jqTds[0].innerHTML = '<select class="form-control input-small select2me"><option' + sickHours + ' value="2">Sick</option><option' + vacHours + ' value="3">Vacation</option></select></select>';
jqTds[1].innerHTML = '<input type="text" id="hours" class="form-control input-xsmall" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input class="form-control form-control-inline input-small2 date-picker" size="4" type="text" value="' + today + '" />';
jqTds[3].innerHTML = '<center><a class="edithours_' + id + '" href="">Save</a></center>';
jqTds[4].innerHTML = '<center><a data-mode="new" class="cancelhours_' + id + '" href="">Cancel</a></center>';
FormComponents.init();
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
var jqSelect = $('select', nRow);
if (jqInputs[0].value == '' || jqInputs[1].value == '') {
alert('Please enter the required information.');
goSave = '0';
} else {
newNum4 = (Math.floor(jqInputs[0].value.replace(",", "") * 100) / 100).formatMoney(2, '.', ',');
if (jqSelect[0].value == '2') {
typeHour = 'Sick';
} else if (jqSelect[0].value == '3') {
typeHour = 'Vacation';
} else {}
goSave = '1';
oTable.fnUpdate(typeHour, nRow, 0, false);
$('td', nRow)[0].setAttribute('id', 'type_' + jqSelect[0].value);
oTable.fnUpdate(newNum4, nRow, 1, false);
oTable.fnUpdate('<center>' + jqInputs[1].value + '</center>', nRow, 2, false);
oTable.fnUpdate('<center><a class="edithours_' + id + '" href="">Edit</a></center>', nRow, 3, false);
oTable.fnUpdate('<center><a class="deletehours_' + id + '" href="">Delete</a></center>', nRow, 4, false);
oTable.fnDraw();
}
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
var jqSelect = $('select', nRow);
newNum4 = (Math.floor(jqInputs[0].value.replace(",", "") * 100) / 100).formatMoney(2, '.', ',');
if (jqSelect[0].value == '2') {
typeHour = 'Sick';
} else if (jqSelect[0].value == '3') {
typeHour = 'Vacation';
} else {}
goSave = '1';
oTable.fnUpdate(typeHour, nRow, 0, false);
$('td', nRow)[0].setAttribute('id', 'type_' + jqSelect[0].value);
oTable.fnUpdate(newNum4, nRow, 1, false);
oTable.fnUpdate('<center>' + jqInputs[1].value + '</center>', nRow, 2, false);
oTable.fnUpdate('<center><a class="edithours_' + id + '" href="">Edit</a></center>', nRow, 3, false);
oTable.fnUpdate('<center><a class="deletehours_' + id + '" href="">Delete</a></center>', nRow, 4, false);
oTable.fnDraw();
}
var oTable = $('#tech_hour_dist_' + id).dataTable({
"bServerSide": false,
"bDestroy": true,
"iDisplayLength": 10,
// "sDom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
"sDom": "",
"sPaginationType": "bootstrap",
"oLanguage": {
"sEmptyTable": "No sick/vacation hours detected for this date range. Press the 'Add' button below to get started.",
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
"bSort": false
});
jQuery('#tech_hour_dist_' + id + '_wrapper .dataTables_filter input').addClass("form-control input-medium"); // modify table search input
jQuery('#tech_hour_dist_' + id + '_wrapper .dataTables_length select').addClass("form-control input-small"); // modify table per page dropdown
jQuery('#tech_hour_dist_' + id + '_wrapper .dataTables_length select').select2({
showSearchInput: false //hide search box with special css class
}); // initialize select2 dropdown
var nEditing = null;
$('#tech_hour_dist_new_' + id).click(function(e) {
// $('#tech_hour_dist_new_'+id).live('click', function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData(['', '', '', '<center><a class="edithours_' + id + '" href="">Edit</a></center>', '<center><a class="cancelhours_' + id + '" data-mode="new" href="">Cancel</a></center>']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow2(oTable, nRow);
nEditing = nRow;
});
$(document).on('click', 'a.deletehours_' + id, function(e) {
e.preventDefault();
var $row = $(this).closest('tr');
var job_id = $row.attr('id');
var thejobID = 0;
if (confirm("Are you sure to delete this?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
$.ajax({
url: URL + 'index.php/process/delete_tech_hours',
type: 'POST',
data: {
job_id: job_id
},
dataType: "html",
success: function(data) {}
});
});
$(document).on('click', 'a.cancelhours_' + id, function(e) {
e.preventDefault();
if ($(this).attr("data-mode") == "new") {
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
$(document).on('click', 'a.edithours_' + id, function(e) {
e.preventDefault();
var $row = $(this).closest('tr');
var attr = $row.attr('id');
if (typeof attr !== 'undefined' && attr !== false) {
URLend = 'index.php/process/update_tech_hours';
job_id = $row.attr('id');
process = 0;
} else {
URLend = 'index.php/process/add_tech_hours';
job_id = '';
process = 1;
} /* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) { /* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") { /* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
if (goSave == '1') {
var tech = id;
var THEtype = $row.find('td:eq(0)').attr('id');
var type = THEtype.split("_");
var hours = $row.find('td:eq(1)').text();
var credit_date = $row.find('td:eq(2)').text();
var thejobID = 0;
$.ajax({
url: URL + URLend,
type: 'POST',
data: {
tech: tech,
type: type[1],
hours: hours,
credit_date: credit_date,
thejobID: thejobID,
job_id: job_id
},
dataType: "html",
success: function(data) {
if (process == 1) {
$row.attr("id", data);
}
FormComponents.init();
}
});
} else {
return;
}
} else { /* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
};
}();
window[TableEditable].init();
}
出于某种原因，如果我将删除功能更改为 click() 而不是 on('click'....但其他人只是重新加载页面，我可以让删除功能工作。我已经在这几天了，我快到我的智慧了。我意识到它很长，但如果有人有任何好的想法或输入，我将不胜感激。另外，我可能遗漏了一些东西，所以如果你需要查看其他代码，请告诉我。谢谢！