Copy a row between 2 jquery Datatables and then update my DB - jquery-ui

Question

I already have a portion of this working using Jquery-Ui, I'd appreciate some further input.
I am able to drag and drop a row from Table1 onto Table2.
issues
When I drop the new row, it does appear on table2 but table2 collapses for some reason and I have to expand it to see the new row
Table1 looks like the row was removed but if you use the Order arrow it reappears. - This issue has been fixed
Additional Question...
I wish to push this new row of data into my db via ajax call...should I try to send the data at the end of the table2.droppable function or should I use some datatbles function in table2 to realise there is new data and then fire?
<table class="dataTable" id="table1">
<thead>
<tr>
<th>Rendering engine</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
</tr>
<tr>
<td>Trident</td>
</tr>
<tr>
<td>Trident</td>
</tr>
<tr>
<td>Trident</td>
</tr>
</tbody>
</table>
<h2>Table 2</h2>
<table class="dataTable" id="table2">
<thead>
<tr>
<th>Rendering engine</th>
</tr>
</thead>
</table>
var t1 = $('#table1').DataTable();
var t2 = $('#table2').DataTable();
//this will hold reference to the tr we have dragged and its helper
var c = {};
$("#table1 tr").draggable({
helper: "clone",
start: function (event, ui) {
c.tr = this;
c.helper = ui.helper;
}
});
$("#table2").droppable({
drop: function (event, ui) {
t2.row.add(c.tr).draw();
// <-- Do this if you want to remove the rows from the first table
$(c.tr).remove();
$(c.helper).remove();
//Redraw Table1
t1.draw();
// -->
return false;
}
});
Fiddle

Answer 1

I would use the code as follows. This will allow you to handle any exceptions that may occur in the process of inserting data in the database.
var t1 = $('#table1').DataTable();
var t2 = $('#table2').DataTable();
//this will hold reference to the tr we have dragged and its helper
var c = {};
$("#table1 tr").draggable({
helper: "clone",
start: function (event, ui) {
c.tr = this;
c.helper = ui.helper;
}
});
$("#table2").droppable({
drop: function (event, ui) {
//Insert the data into my database.
insertData(function (success) {
if (success) {
//Move the row.
t2.row.add(c.tr).draw();
$(c.tr).remove();
$(c.helper).remove();
//Re-draw the tables.
t1.draw();
t2.draw();
}
else {
//Handle a failed insert.
alert("Unable to insert data!");
}
});
}
});
function insertData(cb) {
//Perform some AJAX.
//Test a success.
cb(true);
//Test a Failure.
//cb(false);
}