使用可编辑插件时刷新DataTables表

Question

我正在尝试使用DataTables和Editable jQuery插件创建一个可编辑的表。

虽然该表最初将按预期运行，但我在表中添加了一些过滤选项，基本上使用新的JSON数组刷新DataTable。出于某种原因，如果我包含makeEditable函数调用，那么表格将不会刷新新数据。

DataTables jQuery

$(document).ready(function () {
                $('#dataTables-ebr').dataTable({
                    responsive: true,
                    pagingType: "full",
                    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                        switch (aData[6]) {
                            case 'PASS':
                                $(nRow).css('background-color', '#8CDBA9')
                                break;
                            case 'FAIL':
                                $(nRow).css('background-color', '#FFBFBF')
                                break;
                            case 'DEF':
                                $(nRow).css('background-color', '#FFF0BF')
                                break;
                            case 'NS':
                                $(nRow).css('background-color', '#DCBFFF')
                                break;
                            case 'EC':
                                $(nRow).css('background-color', '#BFD6FF')
                                break;
                            case 'APL':
                                $(nRow).css('background-color', '#D6D0C3')
                                break;
                        }
                    }})
                        .makeEditable({
                            "aoColumns": [
                                null, // Student Name
                                null, // Module Code
                                null, // Part Description
                                null, // Exam Board Year
                                {tooltip: "Click to edit MCQ Score", fnOnCellUpdated: function (sStatus, sValue, settings) {
                                    }, }, // MCQ Score
                                {tooltip: "Click to edit Overall Mark"}, // Overall Mark
                                {tooltip: "Click to edit Outcome", type: "select", data: "{'':' Select Outcome ', 'PASS':'PASS', 'FAIL':'FAIL', 'DEF':'DEF', 'NS':'NS', 'EC':'EC', 'APL':'APL'}"}, // Outcome
                                null // CW Outcome ID
                            ],
                            oEditableSettings: {event: 'click'}
                        });
            });

的JavaScript

function filterTable(coursePartID, moduleID, examBoardID, outcome) {

    if (coursePartID != "") {
        coursePartFilter = coursePartID;
    }

    if (moduleID != "") {
        moduleFilter = str_pad(moduleID, '6', '0', 'STR_PAD_LEFT');
    }

    if (examBoardID != "") {
        examBoardFilter = examBoardID;
    }

    if (outcome != "") {
        outcomeFilter = "'" + outcome + "'";
    }

    if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var tableData = (JSON.parse(xmlhttp.responseText));
            drawTable(JSON.parse(xmlhttp.responseText));
        }
    };
    xmlhttp.open("GET", "/sms/ebr/includes/get_ebr_table.php?coursePartID=" + coursePartFilter + "&examBoardID=" + examBoardFilter + "&moduleID=" + moduleFilter + "&outcome=" + outcomeFilter, false);
    xmlhttp.send();
}

function drawTable(tableData) {
    $(document).ready(function () {
        $('#dataTables-ebr').dataTable().fnClearTable();
        $('#dataTables-ebr').dataTable().fnAddData(tableData);
        $('#dataTables-ebr').dataTable().fnDraw();
    });
}

我很感激对此有任何帮助或帮助，我对整个jQuery和Web开发都很陌生，但除了这个特定的问题之外，我一直在取得相当稳定的进展。