How to re-initialize a DataTable (reload it from scratch)?

waca

Hi-- (first post) -- want to say this is an excellent piece of work. :)

I've been banging on this problem for two days and have finally thrown in the towel. I've read through the documentation, FAQ, and searched everything I can come up with and am still stuck. So any help would be _much appreciated_!

Here's my problem in a nutshell:

(1) We have a table on a page which is being dynamically updated -- the _entire table_ -- because so many rows can change or be updated that it is simply easier. The table does not contain very many rows (< 100).

(2) There is a lot of CSS markup in the table to show row ID's, cell classes, etc.

(3) What I want to do is "reload the DataTable" that was initially attached to this table when the table's XHTML is dynamically updated.


Now I've tried deleting the DataTable object (digging in the DataTables JS code to the best of my ability) and calling the initialization again, but I run into the following code no matter what I do:

[code]
/* Sanity check that we are not re-initialising a table - if we are, alert an error */
for ( i=0, iLen=_aoSettings.length ; i

allan

Sorry to say that there currently isn't a way to 'destroy' a DataTables object - see:

http://datatables.net/forums/comments.php?DiscussionID=1066
http://datatables.net/forums/comments.php?DiscussionID=990

As such, the best way to 'reload' the Data in the table is to use the API. It provides fnClearTable and fnAddData which will allow you to refresh it - or better yet use the fnReloadAax plug-in which will reload from an Ajax source. If this doesn't quite fit what you need, then it might be useful as a basis for modifying it to match what you do need.

Basically if you have an HTML table, you'll need to build a Javascript array from it, and then use the API to do the refresh.

Hope this helps.

Allan

waca

Thanks, Allan!

I was looking at the sAjaxSource and the aData/aaData arrays but for some reason became stuck on two points: (1) how to add CSS ids/classes (especially classes) onto the rows (i.e. it's not just data but the attr's on the 's), and (2) how to make the data for a cell include something like buttons, which this table has (i.e. ).

I believe (2) is probably just a perception issue I had as I see no real reason why I can't just put the (button) markup in the JSON data array for aData/aaData.

And for (1) I believe I saw a property that parallel's aData/aaData whereby you can apply CSS classes to the columns. I need to dig again in the documentation for this one -- I've lost track of it! Doh!


I'm going to play with loading the aData/aaData directly since I've actually got the updated table XHTML coming straight into the same JS file where the DataTable is being applied. I'm going to write a quick function to convert it into the correct JSON structure to load into the DataTable and do the fnClearTable/fnReloadAjax updating.

Hopefully that will do the trick! :)


I think what I was looking for originally was an fnReloadTable API function/plug-in that would allow you to pass an entire table to the DataTable object, but only if it had the same column data, etc. (much like fnAddRow). Essentially an fnReloadAjax but just reloading the original XHTML table.

Maybe I'm the only one needing such a beast? I might look into eventually turning my solution above into such a plugin once the deadline (and my vacation which is right behind the deadline!) passes.


Thanks again for creating such a nice piece of work, and for responding to my post and helping me out.

Cheers!
--waca

waca

P.S. (sorry to double-post but this is important):

I definitely have to have the id attr on the and classes on some of the 's, so this is where I'm searching now: how to get this information into fnAddData/fnReloadAjax.

In other words, I can see where I can convert the / data into a JSON 2D array format, but how do I get the in there and ?

Thanks again.

Cheers!
--waca

waca

Ok -- I think I've figured out that is probably irrelevant to DataTables -- it's just part of the XHTML table itself. Probably the same goes for the single values which are not part of entire columns, etc.


And I've got the fnClearTable() and fnAddData() working (sweet!!) EXCEPT for one thing: when I do this combination, the new data is loaded fine -- but all the column sorting disappears! No <>'s on the columns, etc. I'm trying to figure out what might be causing this but have not come up with anything yet...

I don't know if it's because I'm doing the update to the table's XHTML and then going through this process of updating the aaData? Could it be that the DataTable loses the event binding for sorting because the actual table XHTML is being updated? If I didn't update the / 's would that make a diff? I'm going to try this next.

I'm so close now! I have the data updating fine but the sorting CSS (the <>'s on the columns) vanishes...

Is there some magical way to grab the DataTable settings and then reapply them? Along the lines of oSettings = oTable.fnSettings(); to get them and oTable.fnSetSettings( oSettings ); to set them again?

I'll keep digging but I think this is my last hurdle for now. Thanks for the help and for putting up with my multiple posts. Have to "talk it out" to understand it and mb this will help someone else who thinks the same way. :)

Cheers!
--waca

waca

Yep, updating the section kills the sorting <>'s I imagine because it's killing the event bindings.

So, I am now only updating the table's and that works great! :D


Now there is only one minor problem: when I add a new tr to the table (I update the and then go through building aaData=[][] and calling fnClearTable() and fnAddData(aaData)), if the new tr has a class applied to it (let's call it HIGHLIGHT), then that CSS is not applied when the DataTable redraws -- probably because it is overriding the tr's classes?

So I am now looking at your examples for the best way to "re-apply" the tr's classes -- perhaps via fnDrawCallback() and fnGetNodes().

Really pleased this is working so well and I hope my self-discussion helps others who might hit similar issues. :)

waca

Dang... Looks like doing the data refresh via fnAddData is not updating my buttons correctly... they are keeping their bind via jQuery .live() just fine, but in order to know what row they are associated with, they use a reference to the enclosing -- the "xyz" id value:

[code]
$("input.jqassign").live( 'click', function() {
var task_id = $(this).closest('tr').attr('id');
[/code]

After I update the table's tbody and then do the fnClearTable()/fnAddData() combination for updating the DataTable, it appears the enclosing 's id is being lost. It shows up as null...


This is the gotcha with the table's XHTML being updated such that and/or ids/classes change. I don't think those values are propagating into the DataTable's internal data.

I'm going to try doing some kind of .addAttr loop on the nTr's, but dang this is getting complicated. :(

waca

Looks like the / ids/classes are not reapplied when data is updated. I could see where this might be a major problem if you had lots of isolated classes applied to individual cells for some reason, but for what I'm doing there isn't too much to worry about.

I tracked down using fnRowCallback() (http://datatables.net/usage/callbacks) to set the row's id/classes as per another person's previous forum post (http://datatables.net/forums/comments.php?DiscussionID=254&page=1#Item_0). That should get the job done for the 's.

And I used the sClass property to apply the class I need on one of the columns.

I don't know if putting this in a single FAQ entry for dealing with / id's/classes would be a good idea, since it's something I'm sure people run into fairly often and takes a bit of research to put all the pieces together.


Again, great job with DataTables! Really nice. Looking forward to digging deeper and continuing to use this fantastic piece of JS magic.

Cheers!
--waca

allan

Hi waca,

hehe - nice monologue ;-). Are you happy with everything now?

I agree - I think I will put an example together showing one method for applied an ID to TR elements, as this does come up every now and then. That could easily then be extended by the developer to TD elements... Added to the to-do list.

Regards,
Allan

pwc1011

For what it's worth, I ran into a similar issue. I ended up writing this function to destroy the table and then call datatables to recreate the table.

[code]
// before creating a table, make sure it is not already created.
// And if it is, then remove old version before new one is created
var currTable = $("#example");
if (currTable) {
// contains the dataTables master records
var s = $(document).dataTableSettings;
if (s != 'undefined') {
var len = s.length;
for (var i=0; i < len; i++)
{
// if already exists, remove from the array
if (s[i].sInstance = tId) {
s.splice(i,1);
}
}

}
}

[/code]

Patrick

allan

Nice one Patrick. To complete a destructor function, I think all that is needed is to restore the original table, and remove the DataTables added nodes (in aanFeatures). Page bookmarked :-)

Allan

waca

heh -- it did end up being a bit of a monologue, didn't it. :)

It looks like Patrick has conjured up the magic incantation I couldn't for the life of me come up with. So, Allan, does your last comment mean you are going to elaborate on restoring the table and removing the added nodes? I couldn't quite tell...


I'll put together the bits I came up with for doing everything via the current API after I get back from a much needed couple of weeks away from the computer.

Thanks again for creating such an awesome table enhancement. Really makes our project shine.

Cheers!
--waca

pwc1011

Hello waca,

I think what Allan was saying is that he wants to work on a more integrated function to the datatables. In the meantime, you can use the above for a temporary solution.

Patrick

allan

Yup - what Patrick said :-)

I'll see if I can get something like this working for the next release of DataTables. What I will probably do is make the destructor an API function (fnDestory() for example) rather than a re-initialisation call. I'd like to save the re-initialisation call for obtaining the original object. I'll see how easy it is to get that into the next release as well, as that will hopefully round of the API nicely.

Regards,
Allan