sDom and fnAddData problem? - SOLVED

mopitar

Hello all,
I'll try to explain a strange situation with the sDome param.. i dont know if it is a bug, or it is a develp problem, but it is really driving me crazy,
Thanks in advance for your help.

I'm using sDom param in the datatable inizialization. The table is Empty in the begining, but inmediatly it's filled using fnAddData.
The problem is that i can't write the content of the new sDom div element added once table is initialized. It is like datatables had not finished to add the div element to the dom.

trying to sum up the code:

1.- step 1 init datatable
"sDom": '<"H" <"toolbar"> f>t<"F"ip>',
"bJQueryUI": true,
"bSort": true,
"oLanguage":{"sUrl": "/lang/dt_en.txt"}
2.- $('div.toolbar').html('TEST');
3.- fnAddData(data)

These are the strange test resutls that i have got:

- "TEST" is not added to toolbar div, BUT i have checked the dom with firebug and is corretct and exists. BUT there is nothing inside.
- If I comment the code that fills datatable. (fnAddData) it works correctly!!
- After that, obiously, I thought that datatable had not finished to initialize when I called $('div.toolbar').html('TEST'); SO I add the same code in the fnInitComplete callback. Results: It does not work . :((
- So I needed to know if InitComplete Callback was called, so i put alert('Init') in the callback. Result: IT WORKS!!

After that test i thought to kill myself XDDD Summing it up, I 'm still thinking that probably, and i dont know why , datatables has not finished to add the div to the dom when fnAddData it's called..

Anyone could give me any suggestion?
PD: I use the same code in other parts of the code, and it works perfect, the diference is that in that parts the table is filled before initialize datatable.

Thank you
David

jnelson

Interestingly this doesn't seem documented in the sDom docs but this is what I do for this situation.

try doing this:
[code]"sDom": '<"H" <"#toolbar"> f>t<"F"ip>'[/code]
this creates a

here is a quick setup that works:
[code]
$(document).ready(function() {
oTable = $('#example').dataTable({
"sDom": '<"top"<"#example_title">l<"clear">>t<"bottom"ip<"clear">>'
});
$("#example_title").html("TITLE");
oTable.fnAddData(["one","one","one","one","one"]);
});




Rendering engine
Browser
Platform(s)
Engine version
CSS grade





[/code]

allan

@mopitar: You've got a couple of spaces in your sDom - I'd suggest removing them. You can see a example of what you are trying to do in action here: http://datatables.net/examples/advanced_init/dom_toolbar.html

@jnelson: Thanks for spotting the omission in the documentation. That was a new feature in 1.7.4 which I forgot to add in - it has now been done :-)

Allan

mopitar

Thank you both Allan, Jnelson

At the end, It's been resolved updating to the new version 1.7.5 !!
Now it is working perfecty, thank you very much for helping and for this awesome project.

David.