Modify a datatable with data

Per77

Hello all,

I need you help to insert data into a datatable. The data look like in the picture. The data is dynamic (rows/columns will be changed). I can not figure out how to do it. I would like to write the code in javascript.

/P

kthorngren

There are lots of threads discussing dynamic columns. See if this thread helps.

Kevin

JLegault

If you're looking for reloading data from the DOM/javascript objects the only way to do so is rows().invalidate() and rows().add(). There is currently no support for detecting changes in javascript objcets and re-loading accordingly or seemingly any way to reload javascript data without destroying the table and re-creating it. I may be wrong about that though, if someone more experienced could confirm that would be a huge help for me as well.

kthorngren

There is currently no support for detecting changes in javascript objcets and re-loading accordingly or seemingly any way to reload javascript data without destroying the table and re-creating it.

Use clear() followed by rows.add() to reload the data using Javascript data. If the DOM is manipulated you will use rows().invalidate() since Datatables has no knowledge of the updates. Use destroy or destroy() if you want to change the initialization options.

Does this help @JLegault ?

Kevin

Per77

Thanks again for the answers! I have done a small example:
http://live.datatables.net/yuwulefe/1/edit

The table got values at startup. I would like to change the contents (Both rows and number of colums with different header names).

kthorngren

In your example you are appending th elements to the existing thead. You may need to use [jquery empty()] to clear the HTML table. See if this thread helps.

Kevin

Per77

Thanks again kthorngren! You pushed me in the correct direction.

JLegault

@kthorngren I have never had rows().invalidate() work for me. The add method works when you know what has been modified, but if the DOM object is completely replaced with a new object the table must be destroyed and re-drawn. Specifically, destroy() does not do enough, the table itself must be completely removed from the DOM then overwritten. This may only be because I am using a lot of custom options, but in my experience rows().invalidate() does nothing unless the object can be identified as the exact same DOM object.

kthorngren

but if the DOM object is completely replaced with a new object the table must be destroyed and re-drawn

I vaguely remember Allan mentioning something like this.

Specifically, destroy() does not do enough, the table itself must be completely removed from the DOM then overwritten.

One of the examples in the destroy() docs suggest using jQuery empty() in case the columns change. Also this is explained in the thead I link to. Is this what you mean?

Kevin

Per77

Sorry for not explaining my solution! I used both destroy and empty, After that I could create my new table.

/P

JLegault

Yeah it does look like I should make sure to use destroy() and empty() before removing the table object. I wish draw() would re-draw the table entirely, re-creating the rows based on the new DOM object held by the variable it is using to store the data.