How to reinitialize a DataTable instance properly when after the DOM table is rebuilt?

steinark

I am new to DataTables and will first say I am very impressed with the flexibility, quality and documentation, great product!

I have a question which seems trivial, and where I think I see how to accomplish my task when reading the documentation, but it just does not work. The scenario is:

* an empty HTML table with proper thead and tbody is present in the HTML markup
* the DataTable comes into play as a result of a user clicking on some actions:
* the associated event handler triggers a chain of functions which does this, in this order:
* the existing tbody element is cleared with a call to .empty() on that element
* new rows are inserted in tbody by jQuery code in the client after processing some XML returned by Ajax calls
* a DataTable instance is associated with the table

All this works perfectly the first time, the table shows the inserted rows as it should. Each new click should then do the same as above and I would expect the table to be "cleaned" between each time. But it seems that DataTable caches the content separately from the associated DOM element (the table associated by the given id)? This is because after some click the table seems to come out of sync whereby new rows seems to be garbled by the old rows, and the number of rows displayed by the info text does not correspond to what is seen. A click on a column heading to re-sort, cleans up the inconsistency between the number of rows seen and the number of rows reported, but those seen now are the old rows that should have gone because of the .empty() call on the DOM element.

I 've played around with initialising the DataTable globally and then use the API to clear, draw etc. but it does not work. So I guess my question is, what is the best way to organize the code to make sure DataTables display the fresh content inserted dynamically in the DOM by some event handlers?

The project can be seen here:

http://proto.tracetracker.com/Loblaw

1. Click on the Products tab - it takes some seconds to fetch the XML data, parse it and build the table. The table seen now is not the table which goes out of sync, but ..
2. Click on a product in the Product Name column
3. A popup window (jQuery UI Dialog) will shows up with all data on this product. The window title shall reflect the name clicked on as well as the content of the displayed attribute "product_name"
4. Continue to click on product names. After some clicks, observe that the number of rows (attributes) displayed differs from what is actually seen
5. Click on a column heading to re-sort, and the row count is now correct, but the content wrong - it is not the product clicked on and displayed in the window title

Any help and tips will be appreciated, I am totally new to DataTables and more or less jQuery as well ..

--

allan

> But it seems that DataTable caches the content separately from the associated DOM element

Yup - it certainly does :-). There are a number of reasons for this, mainly speed and memory (i.e. remembering about rows that have been removed front he DOM), but it is part of the core functionality of DataTables.

Basically what you need to do is rather than manipulating the DOM directly, is do it through the DataTables API. For example, rather than calling $().empty() on the table body, call fnClearTable (which has the effect of emptying the table, but also tells DataTables what is going on). This is needed because otherwise DataTables doesn't know what you've done to the DOM!

To add new rows, the built in API method fnAddData is ideal for adding JSON data (arrays or objects), but if you want to add a prebuilt TR element you need to use the fnAddTr plug-in method ( http://datatables.net/plug-ins/api#fnAddTr ).

So the sequence would be:

1. fnClearTable
2. Loop over you new rows calling fnAddData or fnAddTr

Regards,
Allan