1

我正在为 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);
});

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

4

1 回答 1

2

随着行的变化，使用 .on 将删除按钮绑定到较低的不变元素，在下面的情况下，单击事件绑定到 $(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);

});

使用上述更新的数据表示例

这将双向工作，具体取决于单击删除按钮的表。您可以通过硬编码主要/次要表变量或将 .on 函数的第二个参数设置为只有在一张表中使用。

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

oTable1.fnDraw();

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

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

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

希望这可以帮助。

于 2012-09-12T10:06:32.347 回答