Datables API creating a wrapper on initialized table

allanluke

Hi community,

I have multiple datatables in this application, but only 1 is displayed at a time. The tables all have the same ID's. A table is detached and stored in cache and added when needed later (note, only 1 table is displayed at a time).

I have customized the search filter by removing all the default listeners (jquery's off function) and then adding my own to have custom searching, the search actually grabs data form the server and populates the table. I add the data to the table using an array. I grab the api of the table, clear all rows, and add the new ones in. Each table has its own individual search that is not shared

This works perfect if in the lifecycle of the application if only 1 table has been added in. It also works fine when the second table (after detaching the first one) has been added. It breaks when I go back to the 1st table, and I run a search. It looks like datatables creates a table inside the table when I grab the api.

so you have a structure like this after I get the api
<wrapper>
<scrollbody>
<wrapper>
<table>
</table>
</wrapper>
</scrollbody>
</wrapper>
The values in the tags are representative of the ids of the divs created.

I'm not sure why this happens. Any thoughts?

allan

The tables all have the same ID's.

That is not valid HTML. An id must be unique.

Allan

allanluke

Hey Allan,

I only have 1 table on the page at a time, so the DOM only contains unique id's.

allan

Ah sorry. I missed that point.

Can you link to the page so I can try to debug it and see what is going on?

Thanks,
Allan

allanluke

Unfortunately not, I'm rethinking my design at the moment so I might not even have to pull off such shenanigans. Thanks for the awesome tool however!

allan

It looks like datatables creates a table inside the table when I grab the api.

It does if you have scrolling enabled. it has to to have the table body scroll unfortunately :-(

edit It creates multiple tables if scrolling is enabled. It absolutely should not be creating a table inside a table. That is not something DataTables does!

Allan

allanluke

I tried debugging it many times and I noticed that datatables creates the wrappers around the table, although it already has been initialized. Is it possible that datatables stores a cache somewhere of initialized tables?

allan

It creates a div wrapper around the table. The table().container() method gives access to it. It should be removed when you call destroy().

Allan

allanluke

Ah but the thing is no table is actually destroyed, its simply detached from the page using jquery's detach method.

No need to fret about it, I've redesigned my implementation.