javascript - DataTables 在表之间移动行

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 将删除按钮绑定(bind)到较低的不变元素，在下面的情况下，点击事件绑定(bind)到 $(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 数据等。

希望这对您有所帮助。