Update of table when using JS Array as source

someotherchris

Hi all,

I'm having huge problems when I want to update an existing table by using new sources. Since I am using an input field to enter a search term for the table data, I fetch the data object via Ajax and apply it with $(selector).dataTable(fetched_data) afterwards. My problem is, that the table is built correctly when I make my first call but it's never updated, when I start another search. I tried lots of combinations using fnDraw, fnUpdate and fnDestroy but now I am totally lost.

Here's my code:
HTML:
[code]




ID
Code
Company
Zip
CIty
Phone









[/code]

JS for data assignment:
[code]
var rTable = parent
.children(".resultstable")
.children("table:first")
.dataTable(data);
[/code]

I hope, I provided all data that is necessary to understand my problem.

Thanks for any kind of advise.

Regards,

Chris

allan

Presumably the initialisation of the table isn't going to change from instance to instance? In which case:

[code]
oTable.fnClearTable();
oTable.fnAddData( fetched_data.aaData );
[/code]
would clear the current data in the table, and then add the new information.

Allan

someotherchris

Hi allan,

thanks for answering so fast!

I changed the code to the following:

[code]
var rTable = parent
.children(".resultstable")
.children("table:first")
.dataTable();

rTable.fnClearTable();
rTable.fnAddData(data.aaData);
[/code]

The first table is displayed correctly but when I try to apply another search, I get "TypeError: Result of expression "oSettings' [null] is not an object".

Is there a problem with ".dataTable()" when I try to update? The problem is, that I have multiple ".resultstable"s and every time I select some "rTable" it seems like I can't use it as a dataTable object, so I try to call ".dataTable()" again in order to get the instance but maybe my approach is wrong here.

Regards,

Chris

allan

I think the approach is fine (it does feel a bit like a work around, and i'm going to see what I can do about it for the next release - but the idea is fine :-) ) - the question is why doesn't it work - and I've got to confess I'm not sure off the top of my head... You aren't rewriting the HTML or anything like that? If you console.dir( rTable ); when does it look like? Any chance you can link to your example?

Allan

someotherchris

Hi Allan,

in order not to confuse you with further information that might be wrong, I installed a test version. You will receive further information via contact form.

BTW: The install isn't for you to do my job. It's just for you if you are interested in the problem. :)

Regards,

Christian

someotherchris

[SOLVED]

Hi Allan,

I solved to problem. Since dataTable rewrites the source (of course), I have to use .find() instead of .children() when searching for the table. Totally my fault. :)

In order not to reinit the already initialized table, I stored the object using .data() to be able to retrieve it on data update.

The code (for anybody who might stumble upon a similar problem):
[code]
// apply data tables
var rTable = parent
.children(".resultstable")
.find("table:first");

// check whether data table has been initialized already
var obj = rTable.data("dataTable");
if (obj === undefined) {
// init and store object for further use
rTable.dataTable(tableConfig);
rTable.data("dataTable", rTable);
} else {
// fetch already initialized object
rTable = obj;
}

// update table content
rTable.fnClearTable();
rTable.fnAddData(data.aaData);
[/code]

Thank again for helping and pushing me into the right direction.

Regards,

Christian

allan

Ah! Good stuff. Thanks for letting me know you found the issue. Sorry I wasn't able to look at it before you got the fix - but great to know that you go it going!

Regards,
Allan

someotherchris

[SOLVED: http://datatables.net/forums/comments.php?DiscussionID=4433&page=1#Item_6 ]

Hi Allan,

no problem. I'm pretty sure it would have taken a decade to solve it without your hints.

Regards,

Christian