Add column function fails on second run for a jQuery datatable in javascript

chapo

Disclaimer : this is a doublon from https://stackoverflow.com/questions/48436341/add-column-function-fails-on-second-run-for-a-jquery-datatable-in-javascript

Was hoping it would get more traction here maybe.

I am trying to add multiple columns to a DataTable one after the other.

Here is the code :

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"
        });

});

Everything is in the jsfiddle(https://jsfiddle.net/2xvscuus/1/)

I can add one column without issue but when I click on the button again I get the dreaded Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'. error message.

I don't understand why it would work the first time and not the second.

All help welcome !

kthorngren

Thanks for the example. It made it easier to help!

In line 47 of the above code you have:
dt = $(datatableId).DataTable({

It should be:
theDT = $(datatableId).DataTable({

The reason is the second time through, in line 24, this statement dt = theDT; references a DT that you destroyed.

Kevin