Question

我正在尝试一个接一个地向DataTable添加多个列。

以下是代码：

var theDT;
var counter = 0;

function getDataFromDT(dt){
    return dt.rows().data().toArray();
}

function getColumnsFromDT(dt){
    return dt.settings()[0].aoColumns;
}
function addColumn() {
    console.log(counter);
    addColumnToDataTable("#theDataTable","addedField"+counter,"addedTitle"+counter,[8,9]);
    counter += 1;
}

function addColumnToDataTable(datatableId,columnFieldName,columnTitle,columnValues) {

    var cols = [];
    var data = [];
    var dt;

    if ($.fn.dataTable.isDataTable(datatableId)) {
        if (datatableId == "#theDataTable") {
            dt = theDT;
        } else {
            alert("Trying to add column to unknow DataTable.");
            return;
        }
        cols = getColumnsFromDT(dt);
        data = getDataFromDT(dt);
        if (typeof dt != "undefined") {
            dt.destroy();
        }
        $(datatableId).empty();
    }

    for (var i=0;i<data.length;i++){
        data[i][columnFieldName] = columnValues[i];
    }
    cols.push(
        {
            "data":columnFieldName,
            "title":columnTitle
        }
    );

    dt = $(datatableId).DataTable({
        columns:cols,
        data: data
    }); 
}

$(function() {   

    $("#theButton").click(addColumn);


    theDT = $("#theDataTable").DataTable({
            table:"display nowrap",
            data:[{test:1,test2:2},{test:3,test2:4}],
            columns: [
                {
                    "data":"test",
                    "title":"test"
                },
                {
                    "data":"test2",
                    "title":"test2"
                }
        ],
            "dom":"t"
        });

});

所有内容都在jsfiddle

中

我可以毫无问题地添加一列但是当我再次点击该按钮时，我收到了可怕的Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.错误消息。

我不明白为什么它会在第一次工作而不是第二次工作。

欢迎所有帮助！

Answer 1

错误抛出，因为全局变量'theDt'保留数据表对象的前一个实例。因此，您必须使用新数据表对象更新DNS变量的值。我在第51行更新了你的代码。请检查以下代码。

 var theDT;
var counter = 0;

function getDataFromDT(dt){
    return dt.rows().data().toArray();
}

function getColumnsFromDT(dt){
    return dt.settings()[0].aoColumns;
}



function addColumn() {
addColumnToDataTable("#theDataTable","addedField"+counter,"addedTitle"+counter,[8,9]);
counter += 1;
}

function addColumnToDataTable(datatableId,columnFieldName,columnTitle,columnValues) {

    var cols = [];
    var data = [];
    var dt;


    if ($.fn.dataTable.isDataTable(datatableId)) {
        if (datatableId == "#theDataTable") {
            dt = theDT;
        } else {
            alert("Trying to add column to unknow DataTable.");
            return;
        }
        cols = getColumnsFromDT(dt);
        data = getDataFromDT(dt);
        if (typeof dt != "undefined") {
            dt.destroy();
        }
        $(datatableId).empty();
    }

    for (var i=0;i<data.length;i++){
        data[i][columnFieldName] = columnValues[i];
    }
    cols.push(
        {
            "data":columnFieldName,
            "title":columnTitle
        }
    );

    theDT = $(datatableId).DataTable({
        columns:cols,
        data: data
    }); 
}

$(function() {   

$("#theButton").click(addColumn);


theDT = $("#theDataTable").DataTable({
        table:"display nowrap",
        data:[{test:1,test2:2},{test:3,test2:4}],
        columns: [
            {
                "data":"test",
                "title":"test"
            },
            {
                "data":"test2",
                "title":"test2"
            }
    ],
        "dom":"t"
    });

});

我也更新了你的小提琴。 https://jsfiddle.net/2xvscuus/2/

对于javascript中的jQuery数据表，第二次运行时添加列函数失败

1 个答案: