aoColumns retaining old length and values after table is destroyed

theodikus

I've got a page where I'm attempting to add and remove columns from a DataTable. I'm reinitializing the table whenever I add or remove columns, by calling table.destroy(); I can successfully add columns, but removing them throws an error inside the datatables.js file. the aoColumns field of oSettings inside _fnCalculateColumnWidths always reads as the largest number of columns submitted : ei, if I start with 8 columns, aoColumns.length is 8. If I add a ninth column, then aoColumns.length is 9. If I remove one, so that there are 8 solumns in the new table, aoColumns.lenght is still 9, even though I'm destroying the table. How do I clear the values stored in aoColumns? I'm creating a columnDefinition array of objects and assigning it to the table as such:

`

            $("#tablebody").empty();
    $("#headers").empty();

    for(var i = 0; i < this.columns.length; i++){
        colArray.push(i);

        var obj = {};
        obj["sTitle"] = this.columns[i];

        columnDefinitions.push(obj);

        $("#headers").append("<th>" + this.columns[i] + "</th>");
    }

    var buttonCopy = {
        exportOptions: {
            columns: colArray
        }
    }

    var buttonPrint = {
        exportOptions: {
            columns: colArray
        }
    }

    var buttonCsv = {
        exportOptions: {
            columns: colArray
        }
    }

    var buttonExcel = {
        exportOptions: {
            columns: colArray
        }
    };

    console.log(columnDefinitions);

    var that = this;
    console.log($("#table"));
    var table = $('#table').DataTable();
    table.destroy();

    console.log(table);$('#table').DataTable({
        "aoColumnDefs": columnDefinitions,
        "autoWidth": true,
        "pageLength": -1,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "data": '',
        "oLanguage": {
            "sSearch": "Search table for: ",
            "sEmptyTable": "You have no data."
          },
        "buttons": [
                $.extend( true, {}, buttonCopy, {
                    extend: 'copy',
                    titleAttr : 'Copy'
                }),
                $.extend( true, {}, buttonPrint, {
                    extend: 'print',
                    titleAttr : 'Print'
                }),
                $.extend( true, {}, buttonCsv, {
                    extend: 'csv',
                    titleAttr : 'CSV'
                }),
                $.extend( true, {}, buttonExcel, {
                    extend: 'excel',
                    titleAttr : 'Excel'
                })
             ],
        "dom": 'lifrtBp'

    });`

theodikus

I basically wrapped the header calculations in an 'if' statement checking to see if they were undefined.