Wrapper div - problems when in a table

Wrapper div - problems when in a table

idotzangidotzang Posts: 2Questions: 0Answers: 0
edited June 2009 in General
I'm looking for a grid component, and am evaluating DataTables which looks good.

I encountered a problem when using DataTables inside another table - DataTables generates a wrapper div around the grid table, which causes my HTML to misbehave - DIV is not allowed within a TABLE.
I browsed through the code, and found this:

* All DataTables are wrapped in a div - this is not currently optional - backwards
* compatability. It can be removed if you don't want it.

in line 2075 of version 1.4.3.
It made me quite optimistic, but reading the code after that comment I could not see a way to get rid of the wrapper div in an elegant manner.

It's probably important to say that in this specific grid instance (I need more than one in my app) I'm not using ANY of the header/footer features like sort, pagination, etc - all I want is a plain old table, wrapped with DataTables functions for convenience.
In other parts of my app I will need sorting, etc.

Any ideas or directions ?


  • allanallan Posts: 54,712Questions: 1Answers: 8,558 Site admin

    I was under the impression from the html spec that all block level elements (including div's) were allowed inside TD and TH elements - or is this a local standard you are working to?

    Regardless, it is quite possible to remove the wrapper div - you'll need two lines of code to change:

    Line 2086-7
    /* Track where we want to insert the option */
    var nInsertNode = oSettings.nTable.parentNode;

    Line 2157-8
    /* Built our DOM structure - replace the holding div with what we want */
    //nHolding.parentNode.replaceChild( nWrapper, nHolding );

    And that should do the trick for you.

This discussion has been closed.