Table dont update after changing JS Source Object

_Bernhard_

Hi, I create a table with JS Object as Source. Later on I change the object and want to update the table with rows().invalidate().draw(), which does not wor for me.

$(document).ready( function () {
  var data = [
    {a: "123", b: "123", c: "123", d: "123"},
    {a: "123", b: "123", c: "123", d: "123"},
  ];

  var col_conf = [
    {title: "a", data: "a"},
    {title: "b", data: "b"},
    {title: "c", data: "c"},
  ];

  var table = $('#Punkte').DataTable( {
    data: data,
    columns: col_conf
  } );

  data.push({a: "123", b: "123", c: "123", d: "123"});
  col_conf.push({title: "d", data: "d"});

  table.rows().invalidate().draw();
} );

This is the Link to my example, which looks like the same as in the official documentation: http://live.datatables.net/yimohega/3/edit?html,js,output

Thanks a lot in advance for all suggestions - I'm going crazy not finding out my error ;-)

kthorngren

Datatables doesn't support dynamically changing the number of columns. You will need to use destroy() or destroy and reinitialize with the new column structure. See this thread for an example.

Kevin

_Bernhard_

Thanks a lot. That helped. With this code it's working:

$(document).ready( function () {
  var data = [
    {a: "123", b: "123", c: "123", d: "123"},
    {a: "123", b: "123", c: "123", d: "123"},
  ];

  var col_conf = [
    {title: "a", data: "a"},
    {title: "b", data: "b"},
    {title: "c", data: "c"},
  ];

  var table = $('#Punkte').DataTable( {
    data: data,
    columns: col_conf
  } );

  data.push({a: "123", b: "123", c: "123", d: "123"});
  col_conf.push({title: "d", data: "d"});

  table.destroy();
  $('#Punkte').empty();

  table = $('#Punkte').DataTable( {
    data: data,
    columns: col_conf
  } );
} );