Add a row dynamically to a table with "complex" header

mc2dev

Hello,

I'm looking for a way to add dynamically a row to a table with a "complex" header.
Here's a simple example of what I want working as expected.

On my source code I've this error : "jQuery.Deferred exception: undefined is not an object (evaluating 'data.toString')".

My example is based on this documentation example.

Thank you for your help!

kthorngren

I see some other errors but they are due to loading the .js and .css libraries in the wrong order and having duplicated libraries.

jQuery.Deferred exception: undefined is not an object (evaluating 'data.toString')

I don't see this error. There must be more to your Datatables configuration than what you are showing. Please update the test case by removing the duplicates and seeing if you can replicate the error so we can help debug.

Kevin

mc2dev

Thank you for your answer.

I added the "Editor" part to my example but it still working...
I share with you a screenshot which appear on my work.

kthorngren

Did you follow the troubleshooting steps in the link provided?
https://datatables.net/manual/tech-notes/4

Sounds like your first row of data is missing the titre object. Or there is a problem with the data structure.

Kevin

mc2dev

Yeah, you're right.
I updated my example and set all my column data to null value and it works but set the same value for all column...

I should problaby do something bad with the datatable logic...

kthorngren

Not sure what you mean. Do you have a link for the updated example?

Kevin

mc2dev

http://live.datatables.net/mosodevi/2/edit?html,js,output

kthorngren

You have data: null for each column. The columns.data docs state this for null:

null - If columns.render is used, the data passed to the rendering function will be the original data source for the row. If there is no renderer the columns.defaultContent value will be used. If there is no default content specified, for display data the source object for that row will be used; null will be used for all other data types.

Basically you are showing the full row of data in each column. See the Data source types docs for more details. The data structure for row.add() needs to match the data structure of your original data.

Kevin

mc2dev

I'm not sure to understand well.

I used "null" on the previous example because it displays something. If I keep my initial datatable structure, it display only 2 first cols of this new and simpler example.

If I want to set the value of "v1.dem" or "v1.codem", it doesn't work...

Thank you for your support.

kthorngren

That example helps

The columns.data state this about the . in your objects:

. - Dotted Javascript notation. Just as you use a . in Javascript to read from nested objects, so to can the options specified in data. For example: browser.version or browser.name. If your object parameter name contains a period, use \\ to escape it - i.e. first\\.name.

You need to escape them like this:
http://live.datatables.net/mosodevi/2/edit

Kevin

mc2dev

Thanks a lot for your help!
It works as expected!