How to change the data behind DataTables

Question

I have a simple JSFiddle to demonstrate the problem.

https://jsfiddle.net/ddehghan/j26d2pdx/2/

If i switch the data of DataTables between 2 different datasets I run into a script error. Am I doing something wrong?

Any help would be appreciated.

HTML code:

<table id="data-table">
    <thead></thead>
    <tbody></tbody>
</table>
<button id="reload1">load data 1</button>
<button id="reload2">load data 2</button>

JS code:

var fillTable = function (data) {
    console.log(data);

    var columns = [];
    $.each(data[0], function (key, value) {
        columns.push({
            "data": key,
                "title": key
        });
    });

    var $table = $('#data-table');

    $table.DataTable({
        "pageLength": 2,
            "destroy": true,
            "lengthChange": false,
            "processing": true,
            "data": data,
            "columns": columns
    });
};

$("#reload1").click(function (e) {

    var data = [{
        col1: 888,
        col2: 999,
        col3: 999
    }, {
        col1: 777,
        col2: 999,
        col3: 999
    }, {
        col1: 666,
        col2: 999,
        col3: 999
    }, {
        col1: 555,
        col2: 999,
        col3: 999
    }, {
        col1: 444,
        col2: 999,
        col3: 999
    }];

    fillTable(data);
});

$("#reload2").click(function (e) {

    var data = [{
        col1: 123,
        col2: 456
    }, {
        col1: 123,
        col2: 456
    }, {
        col1: 123,
        col2: 456
    }, {
        col1: 123,
        col2: 456
    }];

    fillTable(data);
});

Answer 1

It is because the Col3 is empty.

Look at this fiddle.

var fillTable = function (data) {
console.log(data);

var columns = [];
$.each(data[0], function (key, value) {
    columns.push({
        "data": key,
            "title": key
    });
});

var $table = $('#data-table');

$table.DataTable({
    "pageLength": 2,
        "destroy": true,
        "lengthChange": false,
        "processing": true,
        "data": data,
        "columns": columns
});
};

$("#reload1").click(function (e) {


var data = [{
    col1: 888,
    col2: 999,
    col3: 999
}, {
    col1: 777,
    col2: 999,
    col3: 999
}, {
    col1: 666,
    col2: 999,
    col3: 999
}, {
    col1: 555,
    col2: 999,
    col3: 999
}, {
    col1: 444,
    col2: 999,
    col3: 999
}];

fillTable(data);
});

$("#reload2").click(function (e) {

var data = [{
    col1: 123,
    col2: 456,
    col3: 999
}, {
    col1: 123,
    col2: 456,
    col3: 999
}, {
    col1: 123,
    col2: 456,
    col3: 999
}, {
    col1: 123,
    col2: 456,
    col3: 999
}];

fillTable(data);
});

The propblem happens when your "table" have 3 cols and then try to go down to 2 cols.

Answer 2

Thanks for Alan http://datatables.net/forums/profile/1/allan for the answer.

So the issue here is that the tables are being constructed with a different number of columns. When you use destroy is leaves the table in the DOM, so if you click data 1 first you have a table with 3 columns - then load data 2, the configuration only has two columns but the HTML has three. Hence the issue.

The answer is to use the destroy()DT method and $().empty(): https://jsfiddle.net/j26d2pdx/7/

var $table = $('#data-table');

if ( $.fn.dataTable.isDataTable( $table ) ) {
  $table.DataTable().destroy();
  $table.empty();
}

$table.DataTable({
    "pageLength": 2,
        "lengthChange": false,
        "processing": true,
        "data": data,
        "columns": columns
});