javascript - 如何在 DataTables(jQuery DataTables 插件)中复制一行？

Question

我发现了如何使用此 jQuery 代码删除一行。单击带有类删除和垃圾图标的 td 时。

HTML

<table id="foo" class="display" cellspacing="0" width="100%">
<tbody>
      <tr>
      <td>Foo1</td>
      <td>Foo2</td>
      <td>Foo3</td>
      <td class="delete">IMAGE src here</td>
      <td><img src="http://placehold.it/20x20"></td>
    </tr>
</tbody>

JavaScript

$('#foo tbody').on( 'click', 'tr .delete', function () {
        $(this).closest('tr').fadeOut("slow", function(){
            $(this).remove();
        })
    } );

但是我没有找到任何有关重复行的信息。我只想单击其中包含另一个图标的 td，并且该行在下面重复。

Answer 1

要复制一行，您需要将其所有数据复制到一个数组中，然后调用 row.add()将此数据作为新行插入。

类似于:

<table id="foo" class="display" cellspacing="0" width="100%">
<tbody>
      <tr>
      <td>Foo1</td>
      <td>Foo2</td>
      <td>Foo3</td>
      <td class="delete">IMAGE src here</td>
      <td class="copy">IMAGE src here</td>
      <td><img src="http://placehold.it/20x20"></td>
    </tr>
</tbody>

$('#foo tbody').on( 'click', 'tr .copy', function () {
  var row_data = [];
  $(this).closest('tr').find('td').each(function() {
    row_data.push($(this).text());
  });
  // you'll need a reference to your DataTable here
  table.row.add(row_data).draw();
});

要获取对 DataTable 的引用，请将 DataTable() 方法的结果分配给变量。

$(document).ready(function() { 
  var table = $('#foo).DataTable( { "paging": false, "info": false }); 
  // set up your event handlers, etc. 
});

如果您使用 jQuery 而不是使用 row.add() 等 DataTables 方法追加一行，那么当您对表进行排序或分页时，您将丢失该行。