DataTables在表之间移动行 [英] DataTables move rows between tables

问题描述

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

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

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

我将行从一个表移动到另一个表格有问题，现在我有两个功能来完成他们的工作，但我想有一个功能，因为我的解决方案只能在一个方向上工作 - 我可以从一个表移动到另一个表。

$ b （click，function（event）{
var row = $（this）.closest（tr ）.get（0）;
var addElement = oTable1.fnGetData（row）;
oTable2.fnAddData（addElement）;
//从源表中删除元素
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）;
//从源表中删除元素
var removeElement = oTable2.fnGetPosition（row ）;
oTable2.fnDeleteRow（removeElement，null，true）;
}）;

所以我的问题是：如何将上述功能合并成一个 / p>

解决方案

随着行的变化，将删除按钮绑定到一个较低的不变元素.on，在下面的点击事件绑定到$（文档），然后集中在第二个参数。

  $（document）.on（click '.deleteMe'，function（event）
 {
 //获取用于比较的点击表的id 
 var id = $（this）.closest（'table'）。attr 'id'）; 
 
 //将表分配给表对象
 var table = {
 primary：（id ==='example1'）？oTable1：oTable2， 
 secondary：（id！=='example1'）？oTable1：oTable2 
}; 
 
 //而不是在单独的函数中调用表，只需使用动态
 // assign table.primary.x（）和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）; 
 
}）; 
  

已更新的Datatables示例使用上面的

这将有两种方式取决于哪个表的删除按钮被点击。您可以修改它在一个工作或者通过硬编码主表/辅助表变量或将.on函数的第二个参数设置为仅在一个表中使用的类，容易地进行。或者两个方向。

要在在表格的底部添加以下函数：

  oTable1.fnDraw（）; 
  

这将强制表在每次添加或删除新行时重新绘制，这是有用的你可以使用：

 fnDrawCallback：function（）{
 console.log（'draw callback执行）; 
};您的datatable对象中的
  

，以确定应该发生什么。更新页脚，拉取相关的ajax数据等。

希望这有帮助。

I'm building a simple interface for a sql query result.

I've choose to use DataTables and with it help I've created something like this:

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

I have problem with moving rows from one table to another, right now I have 2 functions that do their job, but I would like to have one function, because my solution only works in one direction-I can move from one table to another just ones.

$(".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);
});

So my questions is:How to merge above functions into one.

解决方案

As the rows are changing, bind the delete button to a lower unchanging element with .on, in the case below the click event is bound to $(document) and then focused with the second parameter.

$(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

This will work both ways depending on which table the remove button was clicked in. You can modify this to work in one or both directions easily by hardcoding the primary / secondary table variables or making the .on functions second parameter to a class that is only used in one table.

To run updates on the table, add this line to the bottom of the above function:

oTable1.fnDraw();

This will force the table to re-draw everytime a new line is added or removed, this is useful to you as you can use:

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

within your datatable object to specify exactly what should happen. Updating the footer, pull relevant ajax data etc.

Hope this helps.

这篇关于DataTables在表之间移动行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！