[BUG] Datatables and adding data

techguy1988

For some reason when using the following code to add a new row, datatables creates a new "search bar", "Number of records" and "Showing Entries".

This means that you have all of the controls on the page twice! Whats going on here!?

http://oi54.tinypic.com/2hcere9.jpg

allan

The code wasn't included, but I suspect you are initialising DataTables twice, and using an older version of DataTables. 1.6 and newer will give a warning that it is not allowed, while 1.5 and before will try to recreate the table - resulting in what you are seeing. When you are adding a new row, are you using the fnAddData API function?

Allan

techguy1988

Hi Allan,

Thanks for getting back to me.

I am indeed intialising datatables twice (I have two tables on separate tabs).

But I am using the fnAddData function, maybe it's important to note that it's from an iFrame? So I'm using parent.window.

I am however using the same version of datatables for both of the tables, unless I am missing the point?!

Thanks.

allan

Which version of DataTables is it that you are using? First thing I would suggest is that if you aren't using 1.7.3 (the latest) then it would probably be worth upgrading.

If that doesn't help, can you post some code to show how you are doing what you are doing?

Thanks,
Allan

techguy1988

Hi Allan,

I've got version 1.7.3 (Latest), but I am still having the same issue :|


Code ...
[code]
$(document).ready(function() {
$('#data_table', window.parent.document).dataTable().fnAddData( [
'test test',
'test@test.com',
'test test',
'test test',
'test',
'test'] );
});
[/code]

allan

Interesting. I've just tried this with my zero config example and it seems to work fine:

[code]
$(document).ready(function() {
$('#example').dataTable().fnAddData( [
1,2,3,4,5
] );
} );
[/code]
Can you give us a link showing your setup which is causing the issue?

Thanks,
Allan

techguy1988

Have you tried it using the parent.window though? I think that might be the issue.

techguy1988

Tested with ...

[code]
$(document).ready(function() {
$('#data_table').dataTable().fnAddData( [
'XXXXXX',
'test@test.com',
'test test',
'test test',
'test',
'test'] );
});
[/code]

Works fine - the parent.window is causing the issue!?

Problem is I have a lightbox opening and then the form submits to a iFrame from that, so I need someway of getting the parent element!

allan

Just tried that and it also seems absolutely fine, although I'm not using a child window, just a regular 'new tab'. Are ou using window.open() to control this window, or is there another reason for changing the jQuery operation scope like this?

Allan

techguy1988

Hi Allan,

I've got to admit I am a bit out of my depth here - I am not the best at JQuery.

I've got a Lightbox which is opening this form and then the form posts to the iFrame. Do you know of another way to get the parent element through JQuery? (I am using JQuery tools for the Lightbox)

Thanks

allan

I see - so that call is being made from inside the iframe? Yes that makes sense in that case, but the iframe probably has to have it's only jQuery instance (and therefore DataTables) which I'm thinking might be causing the problem... You initialise it using the parent document's jQuery, and then the child's jQuery (in the iframe), which is why DataTables isn't seeing that the table has already be initialised (the child thinks it hasn't).

Try this:

[code]
window.parent.$('#data_table').dataTable().fnAddData( [ .... ] );
[/code]
That should call jQuery in the parent document, and add the data using the already initialised table instance.

Allan

techguy1988

All works. Allan you're great!

allan

Good to hear that does the trick. I've not come across this usage of DataTables before - a neat idea! Nice one :-).

Regards,
Allan