如何在数据表中复制一行(jQuery DataTables插件）

How can I duplicate a row in DataTables (jQuery DataTables plugin)?

本文关键字：一行 jQuery DataTables 插件 数据表 复制      更新时间：2023-09-26

我发现了如何使用这个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，该行在下面重复。

要复制一行，您需要将其所有数据复制到数组中，然后调用 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() 方法的结果分配给 var。

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

如果使用 jQuery 而不是像 row.add() 这样的 DataTables 方法追加行，则在对表进行排序或分页时将丢失该行。

这是jQuery，它在其下方添加了一行重复的行，其中涉及DataTables。需要注意的是，此方法可能不会保留用户设置的任何排序或筛选。

$('#formtable tbody').on( 'click', 'button.btn-success', function () {
    //destroy instance of DataTables    
    table.destroy(false);
    //script assumes button is clicked on the line that needs to be duplicated
    var btn = this;
    //copy and insert row right below the original
    var line = $(btn).parents('tr');
    line.after(line.clone());
    //since clone retains only input field values, but not dropdown selections,
    //each dropdown value must be assigned individually
    line.next().find("select.shape").val(line.find("select.shape").val());
    line.next().find("select.material").val(line.find("select.material").val());
    line.next().find("select.supplied").val(line.find("select.supplied").val());
    //re-creating DataTables instance 
    //notice that "table" has no "var" in front - that's because it is pre-defined.
    table = $('#formtable').DataTable({
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": "_all"
        } ],
        "paging":   false,
        "info": false,
        "ordering": true,
        "searching": false,
        "rowReorder": true
    }); 
    //"Index Column" values re-calculation
    table.column(0).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    });
});

希望这有帮助。

试试这个：

.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 class="duplicate"><img src="http://placehold.it/20x20"></td>
    </tr>
</tbody>
</table>

脚本

$('#foo tbody').on( 'click', 'tr .delete', function () {
        $(this).closest('tr').fadeOut("slow", function(){
            $(this).remove();
        })
    } );
$('#foo tbody').on( 'click', 'tr .duplicate', function () {
        var myTr = $(this).closest('tr');
        var clone = myTr.clone();
        myTr.after(clone);
    } );
相关文章：