jquery - 使用 AJAX 结果重新加载数据表时出现问题

Question

当我在单选按钮选择事件上重新加载 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');
    }
});

Answer 1

如果您尝试在已包含数据表的 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