当我在单选按钮选择事件上重新加载 ajax 数据时，我遇到刷新 DataTable 的问题 ajax 结果已更新，但 DataTable 显示旧数据 它在控制台上显示以下消息 -
DataTables warning: table id=sample_1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
我在谷歌上搜索了这个警告，但似乎没有什么对我有帮助。
下面是我正在使用的js文件
jquery.dataTables.js
jquery.dataTables.min.js
table-data.js
下面是我的ajax方法
$.ajax({
url: "manual-json.php",
type: "POST",
datatype: 'json',
data: 'jobid=' + $('#jobid').val() + '&matchgroup=' + $('input:radio[name=matchgroup]:checked').val(),
success: function(result) {
alert(result);
var res = "";
data = $.parseJSON(result);
for (var key in data) {
if (data.hasOwnProperty(key)) {
if (data[key].matchStatusID == 7) {
res = res + "<tr id='tab-row'><td colspan='4'><form id='formData" + i + "' onsubmit='formsubmit(this)' method='post' style='margin-bottom: 0;'><table width='100%'><tr><td width='34%'><input type='hidden' name='manualMatchResoulationDetailID' id='manualMatchResoulationDetailID' value='" + data[key].manualMatchResoulationDetailID + "'><input type='hidden' name='matchStatusID' id='matchStatusID' value='" + data[key].matchStatusID + "'><input type='hidden' name='processName" + i + "' id='processName" + i + "' value=''><input type='hidden' name='id' id='id' value='" + i + "'><input type='hidden' name='jobid' id='jobid' value='<?php echo $jobid; ?>'><label id='secondaryData' style='font-size:13px;'>" + data[key].secondaryData + "</label></td><td width='33%'><label id='primaryData' style='font-size:13px;'>" + data[key].primaryData + "</label></td><td width='16%'><label id='searchScore' style='font-size:13px;'>" + data[key].searchScore + "</label></td><td width='17%'><button class='btn btn-blue' id='change" + i + "' type='button' style='padding: 2 2px;font-size: 13px;margin-right: 5px;margin-left: 10px; width: 58px;' onclick='matchprocess(" + i + ",this.id)'>Change</button><button class='btn btn-blue' id='unmatch" + i + "' type='button' style='padding: 2 2px;font-size: 13px;margin-right: 5px;margin-left: 10px; width: 58px;' onclick='matchprocess(" + i + ",this.id)'>Unmatch</button></td></tr></table></form></td></tr>";
} else if (data[key].matchStatusID == 8) {
res = res + "<tr id='tab-row'><td colspan='4'><form id='formData" + i + "' onsubmit='formsubmit(this)' method='post' style='margin-bottom: 0;'><table width='100%'><tr><td width='34%'><input type='hidden' name='manualMatchResoulationDetailID' id='manualMatchResoulationDetailID' value='" + data[key].manualMatchResoulationDetailID + "'><input type='hidden' name='matchStatusID' id='matchStatusID' value='" + data[key].matchStatusID + "'><input type='hidden' name='processName" + i + "' id='processName" + i + "' value=''><input type='hidden' name='id' id='id' value='" + i + "'><input type='hidden' name='jobid' id='jobid' value='<?php echo $jobid; ?>'><label id='secondaryData' style='font-size:13px;'>" + data[key].secondaryData + "</label></td><td width='33%'><label id='primaryData' style='font-size:13px;'>" + data[key].primaryData + "</label></td><td width='16%'><label id='searchScore' style='font-size:13px;'>" + data[key].searchScore + "</label></td><td width='17%'><button class='btn btn-blue' id='match" + i + "' type='button' style='padding: 2 2px;font-size: 13px;margin-right: 5px;margin-left: 10px; width: 58px;' onclick='matchprocess(" + i + ",this.id)'>Match</button><button class='btn btn-blue' id='unmatch" + i + "' type='button' style='padding: 2 2px;font-size: 13px;margin-right: 5px;margin-left: 10px; width: 58px;' onclick='matchprocess(" + i + ",this.id)'>UnReject</button></td></tr></table></form></td></tr>";
} else {
res = res + "<tr id='tab-row'><td colspan='4'><form id='formData" + i + "' onsubmit='formsubmit(this)' method='post' style='margin-bottom: 0;'><table width='100%'><tr><td width='34%'><input type='hidden' name='manualMatchResoulationDetailID' id='manualMatchResoulationDetailID' value='" + data[key].manualMatchResoulationDetailID + "'><input type='hidden' name='matchStatusID' id='matchStatusID' value='" + data[key].matchStatusID + "'><input type='hidden' name='processName" + i + "' id='processName" + i + "' value=''><input type='hidden' name='id' id='id' value='" + i + "'><input type='hidden' name='jobid' id='jobid' value='<?php echo $jobid; ?>'><label id='secondaryData' style='font-size:13px;'>" + data[key].secondaryData + "</label></td><td width='33%'><label id='primaryData' style='font-size:13px;'>" + data[key].primaryData + "</label></td><td width='16%'><label id='searchScore' style='font-size:13px;'>" + data[key].searchScore + "</label></td><td width='17%'><button class='btn btn-blue' id='match" + i + "' type='button' style='padding: 2 2px;font-size: 13px;margin-right: 5px;margin-left: 10px; width: 58px;' onclick='matchprocess(" + i + ",this.id)'>Match</button><button class='btn btn-blue' id='reject" + i + "' type='button' style='padding: 2 2px;font-size: 13px;margin-right: 5px;margin-left: 10px; width: 58px;' onclick='matchprocess(" + i + ",this.id)'>Reject</button></td></tr></table></form></td></tr>";
}
i = i + 1;
}
}
res = restr + res;
res = res + '</tbody>';
$("#sample_1").append(res);
TableData.init();
},
error: function() {
$("#result").addClass('msg_error');
}
});
最佳答案
如果您尝试在已包含数据表的 div 上调用主数据表方法，它将失败，并且不会更新数据表。
/* Init DataTables -only works one time. */
var oTable = $('#mytable').dataTable({
//table options.
});
之后，您应该调用其他方法，例如
oTable.fnReloadAjax()
或
oTable.fnClearTable( 0 );
oTable.fnDraw();
初始化后重新加载表。
所以我要问自己的第一个问题是“我是否加载数据表两次？”嗯，您当然包含两个版本的数据表:生产版本和开发版本。
jquery.dataTables.js
jquery.dataTables.min.js
首先，仅包含这些文件之一。
避免调用专门更新函数的唯一方法是完全销毁数据表。如果数据表在每次重新加载时都存在根本不同，以至于更新函数可能会导致列或数据过时，那么这可能是可取的。请注意，这会极大地降低性能。
var $myTable = $("#mytable")
$myTable.dataTable().fnDestroy(); // destroy the old datatable
oTable = $myTable.dataTable({
//all your options.
});
有关表重新加载的更多信息可以在文档中找到 http://datatables.net/manual/tech-notes/3
关于jquery - 使用 AJAX 结果重新加载数据表时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29161450/