Trouble when "drag and drop" datatables (exchange position)

jjhello

Hello, I have multiple datatables on a single page, and all the tables will refresh themselves after certain time, so far this works correctly (Thanks for the awesome plug-in!). I am trying to apply html5 "drag and drop" to my tables so users can reorder the tables.

Now after a "drag and drop" it seems like two tables switch positions correctly, but when the table refreshes itself (destroy and rebuild), it adds a wrapper div () inside previous wrapper div, and the tables will then have two sInfos and two titles. Below is the code:

This is the code that I used to draw the table:
[code]
var oTable = $('#'+tableId).dataTable( {
"sDom": "<\"toolbar\"><\"#"+tableId+"_toolbar\"><'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6 floatright'p>>",
"bScrollCollapse": true,
"bProcessing": true,
"bAutoWidth": false,
"bDestroy": true,
"aaData": tableJson,
"aoColumns": column,
"oLanguage": {
"sInfo": 'Showing _START_ to _END_ of _TOTAL_ entries.' + lastUpdated,
"sProcessing": "Loading data..."
}
} );
//set title
$("#"+tableId+"_toolbar").html(''+title+'');
//set filter
$("#"+tableId+" tfoot input").keyup(function() {
oTable.fnFilter( this.value, $("#"+tableId+" tfoot input").index(this));
});
[/code]

And before and after the drag and drop, the html for the tables looks something like this, which works fine:
[code]

...
...
...

[/code]

But after drag and drop, then refresh the table (destroy and rebuild), the table will become something like this:
[code]

...
<!--creates a wrapper inside the previous wrapper....

...
...

...
...

[/code]

can someone tell me why it does this? Thanks!