DataTables and UI Tabs

nicholas

I am using UI with DataTables, if the DataTables are on a page on there own they work correctly.

I have setup an Add and Edit tab, which both have 4 DataTables.

One Table has the data written directly in the tbody, this table never has issues, the issue is only with Tables were the data is fetched after they're drawn.

If I open the Add tab x times, all tables work correctly (No fetches are being made to populate any tables).

If I open the Edit tab x times, all tables work correctly (Fetches are made to populate the table).

(Each Add/Edit Tab load results in the html for the table being fetched again).

If I open the Add tab then the Edit tab, I get:

sData is undefined
[Break on this error] if(options.matchSubset){for(var i=q.le...){tr=table.getElementsByTagName("tr")

This message happens somewhere in table.dataTable(), before any fetch is made for data.

The tables in the Add and Edit tabs have all the same details and are identical in everyway.

The only thing I can think of is when I call $("table#report_build_object_field").dataTable() it already sees the DataTable exists or something and looses it's way.

Is there anyway I can destroy a dataTable?

So before I call $("table#report_build_object_field").dataTable again I could do something like $("table#report_build_object_field").dieDataTable() which would destroy it.

Sorry for the lengthy message I wanted to try and make the picture as clear as possible to what I am doing.

paulsperanza

nicholas

Not sure if this helps but if you set the data table's container html to empty the data table shouldbe destroyed.

[code]$('#myContainer').html('');[/code]

I do this on a page that takes parameters for different searches and keeps clearing out the container that holds the datatable. Works like a charm for me.

nicholas

Thank you for the reply paulsperanza.

That has solved the issue of the sdata, but has introduced a new error about columns not matching. However when the page has finished rendering the tables are all created correctly.

This is what I do now; I click the Add tab, then run table.html('') for all my tables then click the Edit tab where I get the warnings about columns before all the tables render correclty.

All my dataTables are created in $(document).ready(function(){{}).

paulsperanza

nicholas

I re-apply the datatables treatment on each load.

You may be able to use JQuery's 'live' function so that any thing created for that table will get the settings forever. You can do this once in document.ready.

Paul Speranza

nicholas

Thanks for replying again.

I've had a look into what you've suggested but have not been able to get anything to work.

I wasn't sure what event I should link the dataTable to.

I also tried .ready() directly on the table and then applying .dataTable(), but this didn't work either, although I didn't really expect it to.

paulsperanza

When you switch your tabs you would set the container html to "".

When you are ready just do your datatable setup again, it will be like your table never existed before. Do this instead of in the document ready.