How to override rendering of table body

Sybeus

Is there a way to prevent DataTables from modifying the <tbody> tag when the table is empty? (especially the initial draw)

I have working code that does most of what I want, but I ran into a scenario where DataTables is either generating an entirely new <tbody> or moving the current one (haven't been able to determine which yet), resulting in two distinct table bodies. But it only seems to happen upon the initial draw when the table is empty. If the table starts off with rows, then it doesn't happen.

You can see a trimmed down code example on fiddle ( http://jsfiddle.net/Sybeus/edcLZ/ ). Just type a name in the input box, click the add button, then you'll see what I mean about two table bodies.

Here's some background in case there's an alternative I'm not seeing. The plan is to use KnockoutJS, Bootstrap, and DataTables.

Bootstrap and DataTables is working smoothly together so far. In addition to a pretty web site, it also means I get equally pretty rows without needing DataTables to decorate them.

The way in which I intend to use KnockoutJS is to take JSON/JS data and bind it to the table body, letting KnockoutJS render the rows of the table body only. This way I'm not generating HTML code in JavaScript or server side to be returned as cell data for DataTables, as would occur in regular server side DataTables. Instead, I only pass data around and most display matters are handled by the view markup. DataTables will then handle the rest, dealing with headers and footers along with the gathering of sorting and searching information from the user, then simply providing me with the aoData array so I can update the current page of table body rows.

Sybeus

From what I can see, there is no way to override rendering of the table body. After looking through the dataTables code base, I see no callback or trick that would allow such a thing. And I'd rather not change core dataTables functions. If only dataTables didn't delete and recreate the tbody element so much, and just emptied it or something similar instead, then it would have worked.

However, I found an alternative by defining a fnRowCallback function and calling ko.renderTemplate on the nRow parameter. Accomplishes nearly the same thing, but not as flexible or efficient, since it binds per row per table draw, instead of my original plan to bind to the html document once and just update observableArrays upon table draws.