Jquery ui 在两个jquery数据表之间复制一行，然后更新我的数据库

我已经使用jQueryUI完成了这项工作的一部分，如果您能提供进一步的信息，我将不胜感激

我可以将表1中的一行拖放到表2中

问题

---

当我放下新行时，它确实会出现在表2中，但是表2由于某种原因会折叠，我必须展开它才能看到新行 表1看起来该行已被删除，但如果使用顺序箭头，它将重新出现。-此问题已修复

附加问题。。。 我希望通过ajax调用将这一新行数据推送到我的数据库中……我是应该尝试在table2.droppable函数的末尾发送数据，还是应该使用table2中的一些datatbles函数来实现有新数据，然后触发

    <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;
                }
            });

渲染引擎
三叉戟
三叉戟
三叉戟
三叉戟
表2
渲染引擎
var t1=$（'#table1'）.DataTable（）；
变量t2=$（'#表2'）。数据表（）；
//这将保留对我们已拖动的tr及其助手的引用
var c={}；
美元（“#表1 tr”）。可拖动({
助手：“克隆”，
开始：功能（事件、用户界面）{
c、 tr=这个；
c、 helper=ui.helper；
}
});
$（“#表2”）。可拖放({
drop：函数（事件、用户界面）{
t2.row.add（c.tr.draw（）；
// 
返回false；
}
});

---

我将使用以下代码。这将允许您处理在数据库中插入数据过程中可能发生的任何异常

var t1=$（'#table1'）.DataTable（）；
变量t2=$（'#表2'）。数据表（）；
//这将保留对我们已拖动的tr及其助手的引用
var c={}；
美元（“#表1 tr”）。可拖动({
助手：“克隆”，
开始：功能（事件、用户界面）{
c、 tr=这个；
c、 helper=ui.helper；
}
});
$（“#表2”）。可拖放({
drop:函数（事件，ui）{
//将数据插入我的数据库。
insertData（函数（成功）{
如果（成功）{
//移动该行。
t2.row.add（c.tr.draw（）；
$（c.tr）.remove（）；
$（c.helper）.remove（）；
//重新画桌子。
t1.draw（）；
t2.draw（）；
}
否则{
//处理失败的插入。
警报（“无法插入数据！”）；
}        
});
}
});
函数insertData（cb）{
//执行一些AJAX。
//考验成功。
cb（真）；
//测试失败。
//cb（假）；
}

“当我删除新行时，它确实会出现在表2上，但表2由于某种原因会折叠，我必须展开它才能看到新行。表1看起来像是删除了该行，但如果使用顺序箭头，它会重新出现。”。。。添加

t2.draw（）在
t1.draw（）之后
@S.Walker你是对的，这确实解决了这个问题-谢谢你，我刚刚意识到jquery ui似乎无法处理ajax中的数据，由于jquery ui问题，我最终转向了另一个方向，我使用了单元格选择器单击每个表来覆盖内容，但我确实使用了您的一些示例。