Question

我正在为sql查询结果构建一个简单的接口。

我选择使用DataTables，并帮助我创建了这样的东西：

http://live.datatables.net/izavon/18/edit#javascript,html,live

我将行从一个表移动到另一个表时遇到问题，现在我有2个函数可以完成它们的工作，但是我希望有一个函数，因为我的解决方案只能在一个方向上工作 - 我可以从一个表移动另一个只是。

$(".deleteMe1").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable1.fnGetData(row);
    oTable2.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable1.fnGetPosition(row);
    oTable1.fnDeleteRow(removeElement, null, true);
});

$(".deleteMe2").on("click", function (event) {
    var row = $(this).closest("tr").get(0);
    var addElement = oTable2.fnGetData(row);
    oTable1.fnAddData(addElement);
    // Remove Element from the source table
    var removeElement = oTable2.fnGetPosition(row);
    oTable2.fnDeleteRow(removeElement, null, true);
});

所以我的问题是：如何将上述功能合并为一个。

Answer 1

当行正在改变时，将删除按钮绑定到带有.on的下部不变元素，在下面的情况下，click事件绑定到$（document），然后用第二个参数聚焦。

$(document).on("click", '.deleteMe', function (event) 
{
    // Get the id of the clicked table for comparison
    var id = $(this).closest('table').attr('id');

    // Assign the tables to the table object
    var table = {
        primary : (id === 'example1') ? oTable1 : oTable2,
        secondary : (id !== 'example1') ? oTable1 : oTable2
    };

    // Instead of calling the tables in seperate functions just use the  dynamically
    // assigned table.primary.x() and table.secondary.x()
    var row = $(this).closest("tr").get(0);

    var addElement = table.primary.fnGetData(row);

    table.secondary.fnAddData(addElement);

    var removeElement = table.secondary.fnGetPosition(row);

    table.primary.fnDeleteRow(removeElement, null, true);

});

Updated Datatables example using above

根据单击删除按钮的表格，这将同时工作。您可以通过对主/次表变量进行硬编码或将.on函数的第二个参数设置为类来轻松地修改它以便在一个或两个方向上工作只用在一个表中。

要在表格上运行更新，请将此行添加到上述函数的底部：

oTable1.fnDraw();

每次添加或删除新行时，这将强制表重新绘制，这对您有用，因为您可以使用：

"fnDrawCallback": function() {
    console.log('draw callback executed');
 };

在您的数据表对象中，以准确指定应该发生的事情。更新页脚，提取相关的ajax数据等。

希望这有帮助。

DataTables在表之间移动行

1 个答案: